Jump to content
Fi8sVrs

A collection of Higher-Order Components for React

Recommended Posts

  • Active Members

@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
Link to comment
Share on other sites

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