Light Weight Global State Management for React (experimental)

"lelele" is a light weight global state management for React. It's pretty simple interface and easy to use. TypeScript first.

You feel like @reduxjs/toolkit, but lelele is bottom up approach to create state store and enable to make multiple stores called "atom".

Install

With yarn

yarn add lelele

With npm

npm install lelele

With pnpm

pnpm install lelele

Usage

import { atom } from "lelele";
const userAtom = atom({
  key: "user",
  initialState: {
    name: "koki",
    age: 100,
  } as { name: string; age: number },
  stateUpdate: {
    onChangeName: (currentState, name: string) => ({
      ...currentState,
      name,
    }),
    onChangeAge: (currentState, age: number) => ({
      ...currentState,
      age,
    }),
  },
});

const Component = () => {
  const { state, onChangeName } = useLelele(userAtom);

  return (
    <div>
      <p>name: {state.name}</p>
      <input
        value={state.name}
        onChange={(e) => onChangeName(e.target.value)}
      />
    </div>
  );
};

demo

You can try lelele from here or, access http://locahost:3000 after following command.

$ git clone [email protected]:NagaiKoki/lelele.git
$ cd lelele
$ pnpm dev

License

MIT License