GitHub - deepsweet/hocs: A collection of Higher-Order Components for React and R...
source link: https://github.com/deepsweet/hocs
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
readme.md
@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
?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.
Browser
↔️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.
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK