Little State Machine

📠 React custom hook for persist state management
Alternatives To Little State Machine
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Zag2,2022916 hours ago100July 15, 202210mitTypeScript
Finite state machines for building accessible design systems and UI components.
React Automata1,2931344 years ago27August 27, 201814mitJavaScript
A state machine abstraction for React
Little State Machine1,269
2 months ago8mitTypeScript
📠 React custom hook for persist state management
React43741164 months ago29July 27, 202143mitTypeScript
🔼 UI-Router for React
React Transition State24744 days ago21September 07, 20229mitJavaScript
Zero dependency React transition state machine
Use Machine222
2 years ago12February 21, 20204mitTypeScript
React Hook for using Statecharts powered by XState. use-machine.
Xstate Examples123
2 days ago2TypeScript
Practical examples of statechart-based solutions with xstate.
2 days ago15February 20, 20222mitTypeScript
Framework-agnostic state management library designed for simplicity and scalability ⚛
React Machinery101
2 years ago6July 04, 201811mitJavaScript
🔥 React Machinery provides a simple to use, component based approach to state machines in react.
4 years ago1mitSwift
Reactive + Automaton + VTree in Swift, inspired by Elm.
Alternatives To Little State Machine
Select To Compare

Alternative Project Comparisons

📠 Little State Machine

State management made super simple

npm downloads npm npm

✨ Features

  • Tiny with 0 dependency and simple (715B gzip)
  • Persist state by default (sessionStorage or localStorage)
  • Build with React Hooks

📦 Installation

$ npm install little-state-machine


🔗 StateMachineProvider

This is a Provider Component to wrapper around your entire app in order to create context.

  <App />

🔗 createStore

Function to initialize the global store, invoked at your app root (where <StateMachineProvider /> lives).

function log(store) {
  return store;

    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 state of the app.

const { actions, state, getState } = useStateMachine<T>({

📖 Example

Check out the Demo.

import React from 'react';
import {
} from 'little-state-machine';

  yourDetail: { name: '' },

function updateName(state, payload) {
  return {
    yourDetail: {

function YourComponent() {
  const { actions, state } = useStateMachine({ updateName });

  return (
    <div onClick={() => actions.updateName({ name: 'bill' })}>

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

⌨️ Type Safety (TS)

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

Checkout the example.

import 'little-state-machine';

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

💁‍♂️ Tutorial

Quick video tutorial on little state machine.

⚒ DevTool

DevTool component to track your state change and action.

import { DevTool } from 'little-state-machine-devtools';

  <DevTool />

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.

Popular State Machine Projects
Popular Reactjs Projects
Popular Control Flow Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
State Machine
State Management