Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beekai-oss/little-state-machine
📠 React custom hook for persist state management
https://github.com/beekai-oss/little-state-machine
flux react react-hooks state state-machine state-management
Last synced: 5 days ago
JSON representation
📠 React custom hook for persist state management
- Host: GitHub
- URL: https://github.com/beekai-oss/little-state-machine
- Owner: beekai-oss
- License: mit
- Created: 2019-04-08T23:44:46.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-01-10T22:02:43.000Z (19 days ago)
- Last Synced: 2025-01-18T13:00:15.630Z (12 days ago)
- Topics: flux, react, react-hooks, state, state-machine, state-management
- Language: TypeScript
- Homepage: https://lrz5wloklm.csb.app/
- Size: 2.03 MB
- Stars: 1,488
- Watchers: 13
- Forks: 53
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
📠 Little State Machine
State management made super simple
[](https://www.npmjs.com/package/little-state-machine)
[](https://www.npmjs.com/package/little-state-machine)
[](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:
