Minimal State Manager For React – lilush

Description:

A minimal, zero-dependency state manager for React apps that is written in TypeScript. It’s designed to be simple and easy to use, making it a great choice for developers who want to manage state in their React apps without having to deal with a complex or bloated library.

How to use it:

1. Install.

# Yarn
$ yarn add lilush
# NPM
$ npm i lilush

2. Creating a Store.

import { createStore } from 'lilush';
export const useStore = createStore(
  // Create the initial state object
  {
    name: 'John',
    age: 24,
    employed: true,
  },
  { persist: true } // optional
);

3. The useStore hook.

import { useStore } from './store/store';
export default function Button() {
  const [age, setAge] = useStore('age');
  return (
    // Receive the previous state snapshot and update the state accordingly
    <button onClick={setAge((prevAge) => prevAge + 1)}>
      Current Age: {age}
    </button>
  );
}

Preview:

Minimal State Manager For React - lilush

Add Comment