React hooks combine
Hooks powered, recompose like utility belt for ladies and gentlemen.
React Hooks Combine (RHC) is a simple utility belt to help you split up logic for your components between container (smart) part and dummy component (view) part. It helps you to create only one HOC effortlessly with custom hook which combines all listed HOOKS (all in one).
It has API Design similar to Recompose.
Documentation
Documentation can be found here: API Reference
You can improve it by sending pull requests to this repository.
Let's Get Started
Prerequisites:
- React >= 16.8.0
- yarn or npm
Install (choose preferable way)
yarn add react-hooks-combine
npm install react-hooks-combine
Then...
const useCount = { const count increment decrement = return <div> <button onClick=decrement>-1</button> count <button onClick=increment>+1</button> </div> }
OR
const useCurrentUser = const UserView = { // useCurrentUser is a custom hook // and returns object which contains properties: // details, onDelete, onUpdate, loading, repository // details contains info that comes from some external source by async request const user = return <div> <h2>Hello userdetailsfirstName</h2> ... <button click=useronUpdate>Update</button> <button click=useronDelete>Delete</button> </div> )
OR
// component.jsx const UserPageComponent = <div> <h2>User Form</h2> <ContentLoadIndicator loading=loading> <UserForm initialValues=userData onSubmit=onSubmit onCancel=onCancel /> </ContentLoadIndicator> </div>
// container.js (withAsyncEffect + withCallbacks) UserPageComponent
OR
// component.jsx const CounterComponent = <div> <strong>Active: count</strong> <button type="button" onClick=onPlus>+</button> <button type="button" onClick=onMinus>-</button> </div>
// container.js (withReducer + withCallbacks) const INC = 'INC'const DEC = 'DEC' const reducer = { } // <- deps for useCallback (CHECK API TO LEARN MORE)CounterComponent
OR
// container.js (withState + withCallbacks) // <- deps for useCallback (CHECK API TO LEARN MORE)CounterComponent
OR WHICHEVER YOU LIKE...