Little State Machine
State management made super simple.
✨ Features
- Tiny with 0 dependency and simple (less than 1.5kb)
- Persist state by default (
sessionStorage
) - Build with React Hooks
- Compatible with React Native
? Installation
$ npm install little-state-machine
? Demo
Check out the Demo.? API
? StateMachineProvider
This is a Provider Component to wrapper around your entire app in order to create context.
? createStore
createStore(store, options?: {
name: string; // rename the store
middleWares?: Function[]; // function to invoke each action
syncStores?: // sync with external store in your session/local storage
| Record<string, string[]>
| { externalStoreName: string; transform: Function } // name of the external store, and state to sync
| { externalStoreName: string; transform: Function }[];
}})
Function to initialize the global store, invoked at your app root (where <StateMachineProvider />
lives).
? useStateMachine
This hook function will return action/actions and state of the app.
? Example
? app.js
? yourComponent.js
? yourDetail.js
? action.js
⚒ Little State Machine DevTool
DevTool component to track your state change and action.