Skip to content

el-gringo/easy-peasy

 
 

Repository files navigation

 

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].

About

Vegetarian friendly state for React

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Languages

  • JavaScript 77.9%
  • TypeScript 21.1%
  • Stylus 1.0%