Awesome
@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
Universal
:non-potable_water: omit-props
Helps to omit unnecessary context, state setters or anything else you don't want to propagate with {...spread}
.
:recycle: with-lifecycle
Provides a handy way to use some of React Component Lifecycle methods.
:hourglass: debounce-handler
Helps to debounce handlers like onChange
.
:hourglass: throttle-handler
Helps to throttle handlers like onChange
.
:watch: safe-timers
Provides safe versions of setTimeout
, setInterval
, requestAnimationFrame
and requestIdleCallback
which will be cleared/cancelled automatically before component is unmounted.
:bell: with-callback-on-change
Invokes a callback on prop change, useful to decouple side effects like onChange
handler in a declarative way.
:bell: 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.
:bell: 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.
:mag: with-log
Injects console.log
with props or any custom message into render.
:mag: with-debugger
Injects debugger
into render.
Browser
:left_right_arrow: with-match-media-props
Dynamically map CSS Media Queries matches to boolean props using window.matchMedia()
(Can I use?).
:left_right_arrow: with-resize-observer-props
Dynamically map component size and position changes to props using Resize Observer API (Can I use? :see_no_evil:).
:eyes: with-intersection-observer-props
Dynamically map visibility of a component to boolean props using Intersection Observer API (Can I use?).
:see_no_evil: with-page-visibility-props
Dynamically map page visibility status to props using Page Visibility API (Can I use?).
:electric_plug: with-online-status-props
Dynamically map online/offline status to props using navigator.onLine
(Can I use?).
:no_entry: prevent-handlers-default
Decouples e.preventDefault()
side effect from handlers like form submitting or clicking a link.
React Native
:left_right_arrow: 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.
Development
- Create a new folder in
packages/
, let's saywith-foo
. - See
package.json
in already existing packages and create newwith-foo/package.json
. - Put source code in
with-foo/src/
, it will be transpiled and bundled intowith-foo/dist/
,with-foo/lib/
andwith-foo/es/
. - Put tests written with Jest in
with-foo/test/
. - 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