🍱 Higher-Order Components for React
Switch branches/tags
with-view-layout-props@0.2.0 with-view-layout-props@0.1.3 with-view-layout-props@0.1.2 with-view-layout-props@0.1.1 with-view-layout-props@0.1.0 with-resize-observer-props@0.5.0 with-resize-observer-props@0.4.1 with-resize-observer-props@0.4.0 with-resize-observer-props@0.3.1 with-resize-observer-props@0.3.0 with-resize-observer-props@0.2.0 with-resize-observer-props@0.1.0 with-page-visibility-props@0.4.0 with-page-visibility-props@0.3.0 with-page-visibility-props@0.2.0 with-page-visibility-props@0.1.0 with-online-status-props@0.3.0 with-online-status-props@0.2.0 with-online-status-props@0.1.1 with-online-status-props@0.1.0 with-match-media-props@0.4.0 with-match-media-props@0.3.0 with-match-media-props@0.2.0 with-match-media-props@0.1.2 with-match-media-props@0.1.1 with-match-media-props@0.1.0 with-log@0.5.0 with-log@0.4.0 with-log@0.3.0 with-log@0.2.0 with-log@0.1.0 with-lifecycle@0.5.0 with-lifecycle@0.4.0 with-lifecycle@0.3.0 with-lifecycle@0.2.0 with-lifecycle@0.1.1 with-lifecycle@0.1.0 with-intersection-observer-props@0.5.0 with-intersection-observer-props@0.4.0 with-intersection-observer-props@0.3.0 with-intersection-observer-props@0.2.0 with-intersection-observer-props@0.1.0 with-debugger@0.4.0 with-debugger@0.3.0 with-debugger@0.2.0 with-debugger@0.1.0 with-callback-once@0.3.0 with-callback-once@0.2.0 with-callback-once@0.1.0 with-callback-on-change@0.3.0 with-callback-on-change@0.2.0 with-callback-on-change@0.1.0 with-callback-on-change-while@0.3.0 with-callback-on-change-while@0.2.0 with-callback-on-change-while@0.1.0 throttle-handler@0.5.0 throttle-handler@0.4.0 throttle-handler@0.3.0 throttle-handler@0.2.1 throttle-handler@0.1.1 throttle-handler@0.1.0 safe-timers@0.4.0 safe-timers@0.3.0 safe-timers@0.2.0 safe-timers@0.1.0 prevent-handlers-default@0.4.0 prevent-handlers-default@0.3.0 prevent-handlers-default@0.2.1 prevent-handlers-default@0.1.0 omit-props@0.4.0 omit-props@0.3.0 omit-props@0.2.1 omit-props@0.1.1 omit-props@0.1.0 debounce-handler@0.5.0 debounce-handler@0.4.1 debounce-handler@0.4.0 debounce-handler@0.3.0 debounce-handler@0.2.1 debounce-handler@0.1.1 debounce-handler@0.1.0
Nothing to show
Clone or download



ci coverage

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.



🚱 omit-props

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

♻️ with-lifecycle

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

βŒ›οΈ debounce-handler

Helps to debounce handlers like onChange.

βŒ›οΈ throttle-handler

Helps to throttle handlers like onChange.

⌚️ safe-timers

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

πŸ”” with-callback-on-change

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

πŸ”” with-callback-on-change-while

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.

πŸ”” with-callback-once

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.

πŸ” with-log

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

πŸ” with-debugger

Injects debugger into render.


↔️ with-match-media-props

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

↔️ with-resize-observer-props

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

πŸ‘€ with-intersection-observer-props

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

πŸ™ˆ with-page-visibility-props

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

πŸ”Œ with-online-status-props

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

⛔️ prevent-handlers-default

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

React Native

↔️ with-view-layout-props

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

…and more to come

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