🚀 Basic Usage

Simple store creation and usage with auto-generated setters

📊 Server-Side Data (SSR)

Server read: Server-initialized User is 30 years old

This data was read on the server and rendered as part of the initial HTML.

Interactive Client Component

Welcome, Alice! 👋

Age: 25

Email: alice@example.com

Current Store State:

{
  "name": "Alice",
  "age": 25,
  "email": "alice@example.com"
}

Store Definition

// store/demoStores.ts
import { createFieldStore } from "next-tiny-rx-store";

export const userStore = createFieldStore({
  name: "Alice",
  age: 25,
  email: "alice@example.com",
});

Server Component Usage

// Server Component (this page)
const userName = userStore.get("name");
const userAge = userStore.get("age");

userStore.set({
  name: "Server-initialized User",
  age: 30,
});

Client Component Usage

// Client Component
"use client";
export default function UserProfile() {
  const { name, age, email } = userStore.useFields(["name", "age", "email"]);

  return (
    <div>
      <h1>Welcome, {name}!</h1>
      <p>Age: {age}</p>
      <p>Email: {email}</p>

      <button onClick={() => userStore.setters.setAge(age + 1)}>
        🎂 Happy Birthday!
      </button>
    </div>
  );
}