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

1function log(store) {
2  console.log(store);
3  return store;
4}
5
6createStore(
7  {
8    yourDetail: { firstName: '', lastName: '' } // it's an object of your state
9  },
10  {
11     name?: string; // rename the store
12     middleWares?: [ log ]; // function to invoke each action
13     storageType?: Storage; // session/local storage (default to session)
14     persist?: 'action' // onAction is default if not provided
15     // when 'none' is used then state is not persisted
16     // when 'action' is used then state is saved to the storage after store action is completed
17     // when 'beforeUnload' is used then state is saved to storage before page unloa
18  },
19);

🔗 useStateMachine

This hook function will return action/actions and the state of the app.

1const { actions, state, getState } = useStateMachine<T>({
2  actions?: Record<string, Function> // Optional action to update global state
3  selector?: Function, // Optional selector to isolate re-render based on selected state
4});

📖 Example

Check out the Demo.

1import { createStore, useStateMachine } from 'little-state-machine';
2
3createStore({
4  yourDetail: { name: '' },
5});
6
7function updateName(state, payload) {
8  return {
9    ...state,
10    yourDetail: {
11      ...state.yourDetail,
12      ...payload,
13    },
14  };
15}
16
17function selector(state) {
18  return state.yourDetails.name.length > 10;
19}
20
21function YourComponent() {
22  const { actions, state } = useStateMachine({ actions: { updateName } });
23
24  return (
25    <buttton onClick={() => actions.updateName({ name: 'bill' })}>
26      {state.yourDetail.name}
27    </buttton>
28  );
29}
30
31function YourComponentSelectorRender() {
32  const { state } = useStateMachine({ selector });
33  return <p>{state.yourDetail.name]</p>;
34}
35
36const App = () => (
37  <>
38    <YourComponent />
39    <YourComponentSelectorRender />
40  </>
41);

⌨️ Type Safety (TS)

You can create a global.d.ts file to declare your GlobalState's type.

Check out the example.

1import 'little-state-machine';
2
3declare module 'little-state-machine' {
4  interface GlobalState {
5    yourDetail: {
6      name: string;
7    };
8  }
9}

⌨️ Migrate to V5

• StateMachineProvider has been removed, simple API

1const App = () => (
2- <StateMachineProvider>
3    <YourComponent />
4- <StateMachineProvider>
5);

• 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: