Jump to content
Fi8sVrs

A collection of Higher-Order Components for React

Recommended Posts

  • Active Members
Posted

@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

: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.

 

:left_right_arrow:with-match-media-props

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

 

:hourglass:debounce-handler

Helps to debounce handlers like onChange.

 

:hourglass:throttle-handler

Helps to throttle handlers like onChange.

 

:no_entry:prevent-handlers-default

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

 

…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

 

Download hocs-master.zip

 

Source: https://github.com/deepsweet/hocs

  • Upvote 2

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...