When hooks were announced, I immediately looked to the library recompose to see if it was going to be updated with some hooks.
Unfortunately, the library was to be discontinued..
I decided to take the patterns of Recompose and translate them using Hooks.
The result: Re-Enhance
npm install re-enhance yarn add re-enhance Usage
import { pipe, usePropMapper, useStateEnhancer /* ... */ } from 're-enhance' Recompose
const BaseComponent = props => {...} const enhance = compose( withState(/*...args*/), mapProps(/*...args*/), pure ) const EnhancedComponent = enhance(BaseComponent) Re-Enhance
const useEnhancer = pipe( useStateEnhancer(/*...args*/), usePropMapper(/*...args*/), /*pure cannot be hooked 😔*/ ) // But you can use memo! const BaseComponent = React.memo(props => { const enhancedProps = useEnhancer(props) // ... }) Example
import React from 'react'; import { pipe, useHandlers, useStateEnhancer } from 're-enhance'; const useEnhancer = pipe( useStateEnhancer('counter', 'setCounter', 0), useHandlers({ inc: ({ setCounter }) => () => setCounter(counter => counter + 1), dec: ({ setCounter }) => () => setCounter(counter => counter - 1), }), ); function Component(props) { const { counter, inc, dec } = useEnhancer(props); return ( <div> <button onClick={inc}>Inc</button> {counter} <button onClick={dec}>Dec</button> </div> ); } export default Component; Feedback wanted
Due to the limitations of Hooks, recompose could not be totally ported using React Hooks. However, I may add some of the HOC's to this project for convenience!
If you think that more Hooks can be added, feel free to contribute! 🎉🎉
Top comments (0)