react-state-patterns
Tiny utility package for easily creating reusable implementations of React state provider patterns.
🚀 react-state-patterns makes it easy to (and reduces boilerplate) create implementations of common React state provider patterns.
⚠️ Powered by React Hooks under the hood. (This library has a peer dependency on react: ^16.8.0
)
Getting Started
Install
npm install react-state-patterns --save
Creating State Patterns
Directly From Hook
import useProviders hookSchema from '@procore/react-state-patterns'; // Create the state patternsconst Counter = ; // Counter = { useHook, withState, State, Provider, Consumer }
useStateHook
util
Using
import useProviders useStateHook from '@procore/react-state-patterns'; // Create the state patternsconst Counter = ; // Counter = { useHook, withState, State, Provider, Consumer }
Use the patterns
Decorator Pattern
const Displayer = counter: state handlers <React.Fragment> <div>statecount</div> <button =>Decrement</button> <button =>Increment</button> </React.Fragment>; const StatefulDisplayer = Counter; const rootElement = document;ReactDOM;
Render Prop Pattern
const Displayer = props <Counter.State => counter: state handlers <React.Fragment> <div>statecount</div> <button =>Decrement</button> <button =>Increment</button> </React.Fragment> </Counter.State>;
Context Provider/Consumer Pattern
const Displayer = props <Counter.Provider => <Counter.Consumer> counter: state handlers <React.Fragment> <div>statecount</div> <button =>Decrement</button> <button =>Increment</button> </React.Fragment> </Counter.Consumer> </Counter.Provider>;
Custom Hook Pattern
const Displayer = props const counter: state handlers = Counter; return <React.Fragment> <div>statecount</div> <button =>Decrement</button> <button =>Increment</button> </React.Fragment> ;;
Code Style Guides
Prettier is run as a pre-commit hook to automatically
modify staged .js
and .jsx
files to adhere to base code style rules defined in the .prettierrc
.
Eslint is also used as an in-editor linter, so be sure to install an appropriate Eslint Plugin for your editor of choice. Prettier rules are setup to take precedence and override any conflicting eslint rules.