npmpackage.info

Gathering detailed insights and metrics for little-state-machine

little-state-machine

📠 React custom hook for persist state management

4.8.0

1,480

MIT

TypeScript

905.00 B

29,591,648 3.3

Installations

npm install little-state-machine

Pull Requests

Open

8

Total

88

Closed

30

Merged

50

Issues

Open

3

Total

62

Closed

59

Releases

Version 4.8.0

v4.8.0

Published on 23 Sept 2022

Version 4.7.0

v4.7.0

Published on 17 Sept 2022

Version 4.6.0

v4.6.0

Published on 01 Sept 2022

v4.4.1

Published on 29 May 2022

v4.4.0

Published on 29 May 2022

Version 4.2.4

v4.2.4

Published on 15 Apr 2022

View all 44 releases

Developer

bluebill1049

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

18.5.0

NPM Version

8.12.1 Statistics

1,480 Stars

503 Commits

53 Forks

13 Watching

11 Branches

20 Contributors

Updated on 26 Nov 2024

Bundle Size

1.91 kB

Minified

905.00 B

Minified + Gzipped

Bundlephobia

Languages

TypeScript (94.17%)

JavaScript (5.83%)

Total Downloads

Cumulative downloads

Total Downloads

29,591,648

Last day

-8.5%

57,307

Compared to previous day

Last week

-2.8%

305,553

Compared to previous week

Last month

8.3%

1,320,104

Compared to previous month

Last year

66.8%

13,588,555

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react

Dev Dependencies

@types/react jest microbundle npm-run-all prettier react react-dom rimraf semantic-release ts-jest typescript

Versions

📠 Little State Machine

State management made super simple

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

1<StateMachineProvider>
2  <App />
3</StateMachineProvider>

🔗 `createStore`

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

1function log(store) {
2  console.log(store);
3  return store;
4}
5
6createStore(
7  {
8    yourDetail: { firstName: '', lastName: '' } // it's an object of your state
9  },
10  {
11     name?: string; // rename the store
12     middleWares?: [ log ]; // function to invoke each action
13     storageType?: Storage; // session/local storage (default to session)
14     
15     persist?: 'action' // onAction is default if not provided
16     // when 'none' is used then state is not persisted
17     // when 'action' is used then state is saved to the storage after store action is completed
18     // when 'beforeUnload' is used then state is saved to storage before page unloa
19  },
20);

🔗 `useStateMachine`

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

1const { actions, state, getState } = useStateMachine<T>({
2  updateYourDetail,
3});

📖 Example

Check out the Demo.

1import React from 'react';
2import {
3  StateMachineProvider,
4  createStore,
5  useStateMachine,
6} from 'little-state-machine';
7
8createStore({
9  yourDetail: { name: '' },
10});
11
12function updateName(state, payload) {
13  return {
14    ...state,
15    yourDetail: {
16      ...state.yourDetail,
17      ...payload,
18    },
19  };
20}
21
22function YourComponent() {
23  const { actions, state } = useStateMachine({ updateName });
24
25  return (
26    <div onClick={() => actions.updateName({ name: 'bill' })}>
27      {state.yourDetail.name}
28    </div>
29  );
30}
31
32const App = () => (
33  <StateMachineProvider>
34    <YourComponent />
35  </StateMachineProvider>
36);

⌨️ Type Safety (TS)

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

Checkout the example.

1import 'little-state-machine';
2
3declare module 'little-state-machine' {
4  interface GlobalState {
5    yourDetail: {
6      name: string;
7    };
8  }
9}

💁‍♂️ Tutorial

Quick video tutorial on little state machine.

⚒ DevTool

DevTool component to track your state change and action.

1import { DevTool } from 'little-state-machine-devtools';
2
3<StateMachineProvider>
4  <DevTool />
5</StateMachineProvider>;

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:

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.3

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

little-state-machine

Installations

Pull Requests

8

88

30

50

Issues

3

62

59

Releases

Developer

Developer Guide

CommonJS

Yes

18.5.0

8.12.1

Statistics

Bundle Size

1.91 kB

905.00 B

Languages

Total Downloads

29,591,648

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

📠 Little State Machine

✨ Features

📦 Installation

🕹 API

🔗 StateMachineProvider

🔗 createStore

🔗 useStateMachine

📖 Example

⌨️ Type Safety (TS)

💁‍♂️ Tutorial

⚒ DevTool

By the makers of BEEKAI

🤝 Contributors

10

10

10

10

1

0

0

0

0

0

0

0

0

3.3

/10

🔗 `StateMachineProvider`

🔗 `createStore`

🔗 `useStateMachine`