Package Exports

little-state-machine
little-state-machine/dist/little-state-machine.es.js
little-state-machine/dist/little-state-machine.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (little-state-machine) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

📠 Little State Machine

State management made super simple

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

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.

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

📖 Example

Check out the Demo.

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 (
    <buttton onClick={() => actions.updateName({ name: 'bill' })}>
      {state.yourDetail.name}
    </buttton>
  );
}

function YourComponentSelectorRender() {
  const { state } = useStateMachine({ selector });
  return <p>{state.yourDetail.name]</p>;
}

const App = () => (
  <>
    <YourComponent />
    <YourComponentSelectorRender />
  </>
);

⌨️ Type Safety (TS)

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

Check out the example.

import 'little-state-machine';

declare module 'little-state-machine' {
  interface GlobalState {
    yourDetail: {
      name: string;
    };
  }
}

⌨️ Migrate to V5

StateMachineProvider has been removed, simple API

const App = () => (
- <StateMachineProvider>
    <YourComponent />
- <StateMachineProvider>
);

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: