5.0.1 • Published 6 months ago

little-state-machine v5.0.1

Weekly downloads
33,434
License
MIT
Repository
github
Last release
6 months ago

npm downloads npm npm

  • Tiny with 0 dependency and simple (715B gzip)
  • Persist state by default (sessionStorage or localStorage)
  • Fine-tune the performance with partial render and selector
$ npm install little-state-machine

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

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.

Thanks go to these wonderful people:

5.0.1

6 months ago

5.0.0

6 months ago

4.8.1

7 months ago

5.0.0-next.1

6 months ago

5.0.0-next.0

6 months ago

4.6.0-next.1

3 years ago

4.6.0-next.0

3 years ago

4.8.0

3 years ago

4.7.0

3 years ago

4.7.0-next.0

3 years ago

4.7.0-next.1

3 years ago

4.6.0

3 years ago

4.4.1

3 years ago

4.4.0

3 years ago

4.4.1-beta.0

3 years ago

4.3.3-beta.0

3 years ago

4.3.3-beta.1

3 years ago

4.3.3-beta.2

3 years ago

4.3.3-beta.3

3 years ago

4.3.3-beta.4

3 years ago

4.3.3-beta.5

3 years ago

4.3.3-beta.6

3 years ago

4.3.2

3 years ago

4.3.1

3 years ago

4.3.0

3 years ago

4.2.4

3 years ago

4.2.3

3 years ago

4.2.2

3 years ago

4.2.1

3 years ago

4.2.0-beta.0

4 years ago

4.2.0-beta.1

4 years ago

4.1.0-0

4 years ago

4.2.0

4 years ago

4.1.0-beta.1

4 years ago

4.1.0-beta.4

4 years ago

4.1.0-beta.2

4 years ago

4.1.0-beta.3

4 years ago

4.0.1-beta.0

4 years ago

4.0.1-beta.1

4 years ago

4.1.2

4 years ago

4.1.1

4 years ago

4.1.0

4 years ago

4.0.2

4 years ago

4.0.0

5 years ago

4.0.0-rc.2

5 years ago

3.1.4

5 years ago

3.1.4-beta.1

5 years ago

4.0.0-rc.1

5 years ago

4.0.0-rc.0

5 years ago

4.0.0-beta.2

5 years ago

4.0.0-beta.1

5 years ago

3.1.3

5 years ago

3.1.3-beta.1

5 years ago

3.1.3-beta.2

5 years ago

3.1.3-beta.3

5 years ago

3.1.2

5 years ago

3.2.0-beta.1

5 years ago

3.1.1

5 years ago

3.1.0

5 years ago

3.1.0-beta.2

5 years ago

3.0.3

5 years ago

3.0.2

5 years ago

3.1.0-beta.1

5 years ago

3.0.1

5 years ago

3.0.0

5 years ago

3.0.0-beta.4

5 years ago

3.0.0-beta.3

5 years ago

3.0.0-beta.2

5 years ago

3.0.0-beta.1

5 years ago

2.14.1

5 years ago

2.14.0

5 years ago

2.13.0

5 years ago

2.12.0-beta.1

5 years ago

2.12.0

5 years ago

2.11.4-beta.7

5 years ago

2.11.4-beta.6

5 years ago

2.11.4-beta.2

5 years ago

2.11.4-beta.3

5 years ago

2.11.4-beta.4

5 years ago

2.11.4-beta.1

5 years ago

2.11.3

5 years ago

2.11.2

5 years ago

2.11.2-beta.2

5 years ago

2.11.2-beta.1

5 years ago

2.11.1

5 years ago

2.11.0

5 years ago

2.11.0-beta.1

5 years ago

2.10.9

6 years ago

2.10.8

6 years ago

2.10.7

6 years ago

2.10.7-beta.3

6 years ago

2.10.7-beta.2

6 years ago

2.10.7-beta.1

6 years ago

2.10.6

6 years ago

2.10.5-beta.2

6 years ago

2.10.5

6 years ago

2.10.5-beta.1

6 years ago

2.10.4

6 years ago

2.10.4-beta.1

6 years ago

2.10.3

6 years ago

2.10.3-beta.1

6 years ago

2.10.2

6 years ago

2.10.2-beta.2

6 years ago

2.10.2-beta.1

6 years ago

2.10.1

6 years ago

2.10.0

6 years ago

2.10.0-beta.4

6 years ago

2.10.0-beta.3

6 years ago

2.10.0-beta.2

6 years ago

2.10.0-beta.1

6 years ago

2.9.23

6 years ago

2.9.22

6 years ago

2.9.22-beta.3

6 years ago

2.9.22-beta.2

6 years ago

2.9.22-beta.1

6 years ago

2.9.21

6 years ago

2.9.20

6 years ago

2.9.19

6 years ago

2.9.18

6 years ago

2.9.17

6 years ago

2.9.16

6 years ago

2.9.15

6 years ago

2.9.14

6 years ago

2.9.13

6 years ago

2.9.12

6 years ago

2.9.11

6 years ago

2.9.10

6 years ago

2.9.9

6 years ago

2.9.8

6 years ago

2.9.8-beta.2

6 years ago

2.9.8-beta.1

6 years ago

2.9.7

6 years ago

2.9.7-beta.2

6 years ago

2.9.7-beta.1

6 years ago

2.9.6

6 years ago

2.9.5

6 years ago

2.9.5-beta.2

6 years ago

2.9.5-beta.1

6 years ago

2.9.4

6 years ago

2.9.3

6 years ago

2.9.2

6 years ago

2.9.1

6 years ago

2.9.0

6 years ago

2.8.9

6 years ago

2.8.8

6 years ago

2.8.7

6 years ago

2.8.6

6 years ago

2.8.4

6 years ago

2.8.3

6 years ago

2.8.2

6 years ago

2.8.2-beta.2

6 years ago

2.8.2-beta.1

6 years ago

2.8.1

6 years ago

2.8.1-beta.1

6 years ago

2.8.0

6 years ago

2.7.8

6 years ago

2.7.7

6 years ago

2.7.6

6 years ago

2.7.5

6 years ago

2.7.4

6 years ago

2.7.3

6 years ago

2.7.2

6 years ago

2.7.1

6 years ago

2.7.0

6 years ago

2.7.0-beta.12

6 years ago

2.7.0-beta.11

6 years ago

2.7.0-beta.10

6 years ago

2.7.0-beta.9

6 years ago

2.7.0-beta.8

6 years ago

2.7.0-beta.7

6 years ago

2.7.0-beta.6

6 years ago

2.7.0-beta.5

6 years ago

2.6.1

6 years ago

2.6.0

6 years ago

2.6.0-beta.5

6 years ago

2.6.0-beta.4

6 years ago

2.6.0-beta.3

6 years ago

2.6.0-beta.2

6 years ago

2.6.0-beta.1

6 years ago

2.5.3

6 years ago

2.5.2

6 years ago

2.5.1

6 years ago

2.5.0

6 years ago

2.5.0-beta.3

6 years ago

2.5.0-beta.2

6 years ago

2.5.0-beta.1

6 years ago

2.4.0

6 years ago

2.4.0-beta.5

6 years ago

2.4.0-beta.4

6 years ago

2.4.0-beta.3

6 years ago

2.4.0-beta.2

6 years ago

2.4.0-beta.1

6 years ago

2.3.5

6 years ago

2.3.4

6 years ago

2.3.3

6 years ago

2.3.2

6 years ago

2.3.1

6 years ago

2.3.0

6 years ago

2.3.0-beta.2

6 years ago

2.3.0-beta.1

6 years ago

2.2.1

6 years ago

2.1.1-beta.1

6 years ago

2.1.0

6 years ago

2.0.0

6 years ago

2.0.0-beta.5

6 years ago

2.0.0-beta.4

6 years ago

2.0.0-beta.3

6 years ago

2.0.0-beta.2

6 years ago

2.0.0-beta.1

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

1.0.0-beta.1

6 years ago