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

`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. Build the next-generation forms with modern technology and best in class user experience and accessibility.

🤝 Contributors

Thanks go to these wonderful people: