Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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