statera

Statera

Statera is a lightweight, easy-to-use state management library for React applications. It provides a simple and intuitive API for managing and sharing state across components without the need for complex setups or provider components.

Features

• 🚀 Lightweight (less than 1KB gzipped)
• 🔧 Zero configuration
• 🧠 Intuitive API similar to React's useState
• 🔄 Efficient updates with React's useSyncExternalStore
• 🌳 No need for provider components
• 📦 TypeScript support out of the box
• 🖥️ Server-Side Rendering (SSR) support

Installation

npm install statera
# or
yarn add statera
# or
pnpm add statera

Usage

Here's a quick example of how to use Statera:

import React from "react";
import { statera } from "statera";

// Create a shared state
const useCounter = statera(0);

function Counter() {
  const [count, setCount] = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount((prev) => prev - 1)}>Decrement</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <Counter />
      <Counter />
    </div>
  );
}

In this example, both Counter components share the same state. Updating the count in one component will update it in the other as well.

API

statera

const useMyState = statera(initialState);

Creates a new shared state with the given initial value and returns a custom hook.

Using the state

const [state, setState] = useMyState();

Returns a tuple containing the current state and a setter function, similar to React's useState.

The setter function can be used in two ways:

• Passing a new value directly:

  setState(newValue);
  

• Passing a function that receives the previous state:

  setState(prevState => /* compute and return new state */);
  

Server-Side Rendering (SSR)

Statera supports Server-Side Rendering out of the box. It works seamlessly with frameworks like Next.js without any additional configuration.

Why Statera?

• Simplicity: Statera provides a familiar API that React developers already know, making it easy to learn and use.
• Performance: Built on top of React's useSyncExternalStore, Statera ensures efficient updates and renders.
• Flexibility: Can be used for both simple and complex state management scenarios.
• Lightweight: Adds minimal overhead to your bundle size.
• SSR Support: Works seamlessly in server-side rendered applications.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Created by Sangeet Banerjee