/easy-peasy

Vegetarian friendly state for React

Primary LanguageJavaScriptMIT LicenseMIT

 

Vegetarian friendly state for React

 

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.

npm MIT License Travis Codecov

npm install easy-peasy

Step 1 - Create your store

const store = createStore({
  todos: {
    items: ['Create store', 'Wrap application', 'Use store'],
    add: action((state, payload) => {
      state.items.push(payload)
    })
  }
});

Step 2 - Wrap your application

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

Step 3 - Use the store

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

Documentation

See the official website for tutorials, API docs, recipes, and more.

Backers ❤️

Extreme gratitude to all our backers! [Become a backer].