easy-peasy
Version:
Vegetarian friendly state for React
89 lines (69 loc) • 2.45 kB
Markdown
<p> </p>
<p align='center'>
<img src="https://i.imgur.com/UnPLVly.png" width="280" />
</p>
<p align='center'>Vegetarian friendly state for React</p>
<p> </p>
[](http://npm.im/easy-peasy)
[](http://opensource.org/licenses/MIT)
[](https://travis-ci.org/ctrlplusb/easy-peasy)
[](https://codecov.io/github/ctrlplusb/easy-peasy)
```
npm install easy-peasy
```
**Step 1 - Create your store**
```javascript
const store = createStore({
todos: {
items: ['Create store', 'Wrap application', 'Use store'],
add: action((state, payload) => {
state.items.push(payload)
})
}
});
```
**Step 2 - Wrap your application**
```javascript
function App() {
return (
<StoreProvider store={store}>
<TodoList />
</StoreProvider>
);
}
```
**Step 3 - Use the store**
```javascript
function TodoList() {
const todos = useStoreState(state => state.todos.items)
const add = useStoreActions(actions => actions.todos.add)
return (
<div>
{todos.map((todo, idx) => <div key={idx}>{todo}</div>)}
<AddTodo onAdd={add} />
</div>
)
}
```
## Features
- Zero configuration
- No boilerplate
- React hooks based API
- Computed properties - i.e. derived data
- Data fetching / side effects
- Persist state to session/local storage
- Testing helpers
- Extensive TypeScript support
- Global, shared, or component level stores
- React Native supported
- Redux Dev Tools supported
- Hot Reloading supported
## Introduction
Easy Peasy provides you with an intuitive API to quickly and easily manage the state for your React application. Batteries are included - no configuration is required to support derived state, API calls, performance optimisation, developer tools etc.
## Documentation
See the [official website](https://easy-peasy.now.sh) for tutorials, API docs, recipes, and more.
## Backers ❤️
Extreme gratitude to all our backers! [[Become a backer](https://opencollective.com/easy-peasy#backer)].
<a href="https://opencollective.com/easy-peasy#backers">
<img src="https://opencollective.com/easy-peasy/backers.svg?width=950" />
</a>