Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mcclayton/react-state-patterns
Tiny utility package for easily creating reusable implementations of React state provider patterns.
https://github.com/mcclayton/react-state-patterns
Last synced: about 1 month ago
JSON representation
Tiny utility package for easily creating reusable implementations of React state provider patterns.
- Host: GitHub
- URL: https://github.com/mcclayton/react-state-patterns
- Owner: mcclayton
- License: mit
- Created: 2019-03-11T22:55:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T03:56:56.000Z (almost 2 years ago)
- Last Synced: 2024-09-24T17:37:32.438Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.36 MB
- Stars: 16
- Watchers: 2
- Forks: 2
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `react-state-patterns`
- awesome-react-hooks-cn - `react-state-patterns`
- awesome-react-hooks - `react-state-patterns`
- awesome-react-hooks - `react-state-patterns`
README
# react-state-patterns
[](https://badge.fury.io/js/react-state-patterns)
[](https://github.com/mcclayton/react-state-patterns/blob/master/LICENSE)
[](https://circleci.com/gh/mcclayton/react-state-patterns)
Tiny utility package for easily creating reusable implementations of React state provider patterns.
🚀 [react-state-patterns](https://www.npmjs.com/package/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`)
#### Why?
`react-state-patterns` is incredibly simple, small, and lightweight — making it a great choice for applications that wish to keep their footprint small and do not want a complex state management solution.
This library is also great for those that wish to utilize React Hooks for reusable state but do not want to couple their presentational components directly with state (this makes unit testing components *much* easier 🌟).
`react-state-patterns` also makes state management modular — increasing code clarity and making organization of state a breeze 🍃.
# Getting Started
## Install
```bash
npm install react-state-patterns --save
```
## Creating State Patterns
#### Directly From Hook
```jsx
import useProviders, { hookSchema } from 'react-state-patterns';
// Create the state provider patterns
const Counter = useProviders(props => {
const [count, setCount] = useState(props.initialValue || 0);
const handlers = {
incrementBy: value => setCount(count + value),
decrementBy: value => setCount(count - value)
};
// hookSchema(...)
// => { counter: { state: { count: 0 }, handlers: { incrementBy: (v) => {...}, decrementBy: (v) => {...} } } }
return hookSchema({ count: count }, handlers, "counter");
});
// Counter = { useHook, withState, State, Provider, Consumer }
```
#### Using `useStateHook` util
[useStateHook API Docs](https://github.com/mcclayton/react-state-patterns/blob/master/API.md#useStateHook)
```jsx
import useProviders, { useStateHook } from 'react-state-patterns';
// Create the state patterns
const Counter = useProviders(
useStateHook(
(props) => ({ count: props.initialValue || 0 }),
{
incrementBy: state => value => ({ ...state, count: state.count + value }),
decrementBy: state => value => ({ ...state, count: state.count - value })
},
"counter"
)
);
// Counter = { useHook, withState, State, Provider, Consumer }
```
## Use the patterns
#### Decorator Pattern
```jsx
const Displayer = ({ counter: { state, handlers }}) => (
{state.count}
handlers.decrementBy(1)}>Decrement
handlers.incrementBy(1)}>Increment
);
const StatefulDisplayer = Counter.withState(Displayer);
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
```
#### Render Prop Pattern
```jsx
const Displayer = (props) => (
{({ counter: { state, handlers } }) => (
{state.count}
handlers.decrementBy(1)}>Decrement
handlers.incrementBy(1)}>Increment
)}
);
```
#### Context Provider/Consumer Pattern
```jsx
const Displayer = (props) => (
{({ counter: { state, handlers } }) => (
{state.count}
handlers.decrementBy(1)}>Decrement
handlers.incrementBy(1)}>Increment
)}
);
```
#### Custom Hook Pattern
```jsx
const Displayer = (props) => {
const { counter: { state, handlers } } = Counter.useHook({ initialValue: 5 });
return (
{state.count}
handlers.decrementBy(1)}>Decrement
handlers.incrementBy(1)}>Increment
);
};
```
## Code Style Guides
[](https://github.com/prettier/prettier)
[Prettier](https://prettier.io/) 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](https://eslint.org/) is also used as an in-editor linter, so be sure to install
an appropriate [Eslint Plugin](https://eslint.org/docs/3.0.0/user-guide/integrations#editors) for your editor of choice.
Prettier rules are setup to take precedence and override any conflicting eslint rules.
## License
React State Patterns is available as open source under the terms of the MIT [license](https://github.com/mcclayton/react-state-patterns/blob/master/LICENSE).