Statera NPM | npm.io

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.

npm npm bundle size npm

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.