ptzagk / hocs

:gift: A collection of Higher-Order Components for React

@hocs

A collection of Higher-Order Components for React, especially useful with Recompose.

A Higher-Order Component is a function that takes a component and returns a new component.

Packages

🚱 omit-props

Helps to omit unnecessary context prop, state setters or anything else you don't want to propagate and {...spread} to Component.

♻️ with-lifecycle

Provides a handy way to use some of React Component Lifecycle methods.

↔️ with-match-media-props

Dynamically map CSS Media Queries matches to boolean props using window.matchMedia() (MDN, Can I use).

⌛ debounce-handler

Helps to debounce handlers like onChange.

⌛ throttle-handler

Helps to throttle handlers like onChange.

…and more to come

You can follow me on Twitter for updates.

Development

1. Create a new folder in packages/, let's say with-foo.
2. See package.json in already existing packages and create new with-foo/package.json.
3. Put source code in with-foo/src/, it will be transpiled and bundled into with-foo/dist/, with-foo/lib/ and with-foo/es/.
4. Put tests written with Jest in with-foo/test/.
5. Put demo in with-foo/demo/, it will be rendered and wrapped with HMR.

Available scripts using Start:

yarn start build <package>
yarn start demo <package>
yarn start test
yarn start testWatch
yarn start lint