📠 Little State Machine

State management made super simple

[![npm downloads](https://img.shields.io/npm/dm/little-state-machine.svg?style=for-the-badge)](https://www.npmjs.com/package/little-state-machine) [![npm](https://img.shields.io/npm/dt/little-state-machine.svg?style=for-the-badge)](https://www.npmjs.com/package/little-state-machine) [![npm](https://img.shields.io/bundlephobia/minzip/little-state-machine?style=for-the-badge)](https://bundlephobia.com/result?p=little-state-machine)

✨ Features

- Tiny with 0 dependency and simple (715B _gzip_) - Persist state by default (`sessionStorage` or `localStorage`) - Fine-tune the performance with partial render and selector

📦 Installation

$ npm install little-state-machine

🕹 API

#### 🔗 `createStore` Function to initialize the global store. ```tsx function log(store) { console.log(store); return store; } createStore( { yourDetail: { firstName: '', lastName: '' } // it's an object of your state }, { name?: string; // rename the store middleWares?: [ log ]; // function to invoke each action storageType?: Storage; // session/local storage (default to session) persist?: 'action' // onAction is default if not provided // when 'none' is used then state is not persisted // when 'action' is used then state is saved to the storage after store action is completed // when 'beforeUnload' is used then state is saved to storage before page unloa }, ); ``` #### 🔗 `useStateMachine` This hook function will return action/actions and the state of the app. ```tsx const { actions, state, getState } = useStateMachine({ actions?: Record // Optional action to update global state selector?: Function, // Optional selector to isolate re-render based on selected state }); ```

📖 Example

Check out the Demo. ```tsx import { createStore, useStateMachine } from 'little-state-machine'; createStore({ yourDetail: { name: '' }, }); function updateName(state, payload) { return { ...state, yourDetail: { ...state.yourDetail, ...payload, }, }; } function selector(state) { return state.yourDetails.name.length > 10; } function YourComponent() { const { actions, state } = useStateMachine({ actions: { updateName } }); return ( actions.updateName({ name: 'bill' })}> {state.yourDetail.name} ); } function YourComponentSelectorRender() { const { state } = useStateMachine({ selector }); return

{state.yourDetail.name]

; } const App = () => ( <> ); ``` ## ⌨️ Type Safety (TS) You can create a `global.d.ts` file to declare your GlobalState's type. Check out the [example](https://codesandbox.io/s/typescript-forked-xs30h). ```ts import 'little-state-machine'; declare module 'little-state-machine' { interface GlobalState { yourDetail: { name: string; }; } } ``` ## ⌨️ Migrate to V5 - `StateMachineProvider` has been removed, simple API ```diff const App = () => ( - - ); ``` - Actions now is an object payload `useStateMachine({ actions: { updateName } })` - Upgrade react >= 18 ## By the makers of BEEKAI We also make [BEEKAI](https://www.beekai.com/). Build the next-generation forms with modern technology and best in class user experience and accessibility.

🤝 Contributors

Thanks go to these wonderful people:

little-state-machine

Downloads in past 7 days

0

little-state-machine

Downloads in past 7 days

0

Download

18.9M

Stars

1.2K

Forks

52

Issues

137