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.

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

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

Helps to debounce handlers like onChange.

Helps to throttle handlers like onChange.

Provides safe versions of setTimeout, setInterval, requestAnimationFrame and requestIdleCallback which will be cleared/cancelled automatically before component is unmounted.

Invokes a callback on prop change, useful to decouple side effects like onChange handler in a declarative way.

Invokes a callback on prop change while condition is true, useful to decouple side effects like onChange handler in a declarative way and control loops.

Invokes a callback once condition is true (while previous check was false), useful to decouple side effects like onSuccess or onError handlers in a declarative way.

Injects console.log with props or any custom message into render.

Injects debugger into render.

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

Dynamically map component size and position changes to props using Resize Observer API (Can I use? 🙈).

Dynamically map visibility of a component to boolean props using Intersection Observer API (Can I use?).

Dynamically map page visibility status to props using Page Visibility API (Can I use?).

Dynamically map online/offline status to props using navigator.onLine (Can I use?).

Decouples e.preventDefault() side effect from handlers like form submitting or clicking a link.

Dynamically map View layout dimensions to props using onLayout() handler.

You can follow me on Twitter for updates.

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 commands using Start:

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