little-state-machine
    TypeScript icon, indicating that this package has built-in type declarations

    4.2.0 • Public • Published
    Little State Machine - React Hooks for state management

    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
    

    🕹 API

    🔗 StateMachineProvider

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

    <StateMachineProvider>
      <App />
    </StateMachineProvider>

    🔗 createStore

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

    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)
      },
    );

    🔗 useStateMachine

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

    const { actions, state } = useStateMachine<T>({
      updateYourDetail,
    });

    💁‍♂️ Tutorial

    Quick video tutorial on little state machine.

    📖 Example

    Check out the Demo.

    import React from 'react';
    import {
      StateMachineProvider,
      createStore,
      useStateMachine,
    } from 'little-state-machine';
    
    createStore({
      yourDetail: { name: '' },
    });
    
    function updateName(state, payload) {
      return {
        ...state,
        yourDetail: {
          ...state.yourDetail,
          ...payload,
        },
      };
    }
    
    function YourComponent() {
      const { actions, state } = useStateMachine({ updateName });
    
      return (
        <div onClick={() => actions.updateName({ name: 'bill' })}>
          {state.yourDetail.name}
        </div>
      );
    }
    
    export default () => (
      <StateMachineProvider>
        <YourComponent />
      </StateMachineProvider>
    );

    ⌨️ 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;
        };
      }
    }
    import * as React from 'react';
    import {
      createStore,
      useStateMachine,
      StateMachineProvider,
      GlobalState,
    } from 'little-state-machine';
    
    createStore({
      yourDetail: { name: '' },
    });
    
    const updateName = (state: GlobalState, payload: { name: string }) => ({
      ...state,
      yourDetail: {
        ...state.yourDetail,
        ...payload,
      },
    });
    
    const YourComponent = () => {
      const { actions, state } = useStateMachine({
        updateName
      });
    
      return (
        <div onClick={() => actions.updateName({ name: 'Kotaro' })}>
          {state.yourDetail.name}
        </div>
      );
    };
    
    const App = () => (
      <StateMachineProvider>
        <YourComponent />
      </StateMachineProvider>
    );

    DevTool

    DevTool component to track your state change and action.

    import { DevTool } from 'little-state-machine-devtools';
    
    <StateMachineProvider>
      <DevTool />
    </StateMachineProvider>;

    🖥 Browser Compatibility

    Little State Machine supports all major browsers IE11 include !

    If you run into issues, feel free to open an issue.

    📋 Polyfill

    Consider adding Object.entries() polyfill if you're wondering to have support for old browsers. You can weather consider adding snippet below into your code, ideally before your App.js file:

    utils.[js|ts]

    if (!Object.entries) {
      Object.entries = function (obj) {
        var ownProps = Object.keys(obj),
          i = ownProps.length,
          resArray = new Array(i); // preallocate the Array
        while (i--) resArray[i] = [ownProps[i], obj[ownProps[i]]];
        return resArray;
      };
    }

    Or you can add core-js polyfill into your project and add core-js/es/object/entries in your polyfills.[js|ts] file.

    Sponsors

    Thank you very much for those kind people with their sponsorship to this project.

    @sayav @lemcii @washingtonsoares @lixunn @SamSamskies @peaonunes @wilhelmeek @iwarner @joejknowles @chris-gunawardena @Tymek @Luchanso @vcarel @gragland @tjshipe @krnlde @msutkowski @mlukaszczyk

    Keywords

    Install

    npm i little-state-machine

    DownloadsWeekly Downloads

    81,242

    Version

    4.2.0

    License

    MIT

    Unpacked Size

    42.8 kB

    Total Files

    16

    Last publish

    Collaborators

    • bluebill1049