@easy-peasy/react/README.md

easy-peasy connector for React

[![Actions Status](https://github.com/CyriacBr/easy-peasy-packages/workflows/build%20%26%20test/badge.svg)](https://github.com/CyriacBr/easy-peasy-packages/actions)

# React Connector

```
npm install @easy-peasy/react
yarn add @easy-peasy/react
```  

## Basic Usage

**Step 1 - Export an existing `easy-peasy` store**

```js
import store from 'some-pkg';
```

**Step 2 - Wrap your application**

```js
import { StoreProvider } from '@easy-peasy/react';

function App() {
  return (
    <StoreProvider store={store}>
      <TodoList />
    </StoreProvider>
  );
}
```

**Step 3 - Use the store**

```js
import { useStoreState, useStoreActions } from '@easy-peasy/react';

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>
  )
}
```