npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

hawks

v0.1.7

Published

A lightweight bundle of Higher-Order Components (HOCs) for React, in the vein of recompose.

Downloads

17

Readme

hawks

A lightweight, cherry-pickable bundle of Higher-Order Components (HOCs) for React, in the vein of Recompose.

Notes

/lib cherry-picking convention

All hawks components are cherry-pickable with import Component from 'hawks/lib/component'.

Pure by default

Most components produced by hawks are "pure-by-default", which is to say they inherit from React.PureComponent and will only render if they receive new props or state.

Components

withConstProps

withConstProps(
  propMap: (initialProps) => {
    [constPropName: string]: [value: any]
		...
  },
): HigherOrderComponent

Like withProps, except the props are created once at component initialization time, and never change throughout the component's lifecycle.

withConstHandlers

withConstHandlers(
  handlers: {
    [constPropName: string]: [handler: function(props, ...args)]
		...
  }
): HigherOrderComponent

recompose's withHandlers implementation regenerates the handlers whenever the incoming props change, largely defeating the performance optimizations that withHandlers is supposed to provide when used with pure rendering.

withConstHandlers generates truly-constant handler functions that never change throughout the component lifecycle. Instead of obtaining props from an ever-changing closure, the handler function is passed the props at the time of handler execution as its first argument. The remaining arguments from the called handler are spread to the inner handler as well.

withPropsFromObservables

withPropsFromObservables(
  propsToObservableMap: (initialProps) => {
    [valuePropName: string]: [observable: Observable]
		...
  },
  shouldUpdate?: (nextProps, currentProps) => boolean
): HigherOrderComponent

Given a function mapping props to an observable map, merges corresponding props into the subcomponent's props (as in withProps) with the current value of each observable. The observables are watched for changes and the subcomponent is rerendered with new props in realtime.

The propsToObservableMap function receives the props of the upstream components and must produce an object of the form { propName: Observable, ...} with each named property receiving the current value of the corresponding observable.

By default, propsToObservableMap will be called every time the props change and the resulting observable map will be diffed against the previous one, with observables being (un)subscribed as needed. If the optional shouldUpdate function is provided, the propsToObservableMap will only be called, and the internal observable state will only be updated, if the shouldUpdate returns a truthy value upon receiving new props.

withRouterLink

withRouterLink(
  eventName: string (default 'onClick'),
  routerAction: string (default: 'push')
): HigherOrderComponent

NB: This component is for use with the react-router withRouter HOC, which must precede it in the compose() chain. This library does not depend on react-router nor enforce the presence of the HOC; you must do this yourself.

Creates an event handler on the wrapped component which will cause a react-router transition when called. By default, the onClick event handler is provided, and the router state is pushed when the handler fires. This component will also add an active prop to the wrapped component, according as the router's current path matches the path this component links to.

You may pass the standard react-router props to the outer component: to for URL, query, hash, and state for parameter-passing, and onlyActiveOnIndex to mask out route wildcards.