Over Stateful
🐺A small state management with less setup and super scalability in your react app.
See Demo On Codesandbox
✨ Features
- 😎 Easy to learn
- 📦 ~590b (gzipped)
- 🔥 Easy to scale
- 🙅♂️ Zero dependencies
- ✂️ Super-flexible API
- ✅ Fully tested and reliable
- ⚒ CommonJS, ESM & browser standalone support
🔧 Installation
You can easily install this package with yarn or npm:
$ yarn add over-stateful
or
$ npm install --save over-stateful
📖 Usage
Some usage terms you need to be familar with – createStore
, useOverProvider
and useOverState
, OverProvider
, store
:
- createStore, takes in the central state and the central reducers,
- useOverProvider, internal tool that handles the reducer and state.
- useOverState, hooks that handle reading state and dispatching actions
- OverProvider, React element that takes in the store, -store, Proxy object with your state.
Here is a simple example: store.js
const addOne = type: 'ADD_ONE_COUNT' ;const minusOne = type: 'MINUS_ONE_COUNT' ; const countReducer = {
import React from 'react';import OverProvider createStore from 'over-stateful';import countReducer from './store';import App from './App'; const store = ; { return <OverProvider => <App /> </OverProvider> ;}
Comparison with other state management (examples)
With other state mannagement, setup and learning curve is a lot harder and bent
you'd have to call/read documentations
over and over again ..... For example:
- Redux state managment
- Easy State
- Mobx e.t.c
Meanwhile, with over-stateful
, all you need is this, less documentation
required to get you going...
import React from 'react';import OverProvider createStore from 'over-stateful';import countReducer from './store';import App from './App'; const store = ; { return <OverProvider => <App /> </OverProvider> ;}
App.js
import React from 'react';import useOverState from 'over-stateful'; const App = const state dispatch = ; return <> Count: statecount <button => +1 </button> <button => -1 </button> </> ;;
✨
🤝 License
MIT © codewonders.dev · GitHub @adenekan41 / codewonders > ·