Quick Start

Installation

npm install zenbox

Get Started in 4 Steps

Create a Store

Start with createStore and your initial state.

import { createStore } from "zenbox";

// Auto-type inference, no need to write interface manually
const counterStore = createStore({ count: 0 });

Read State

Access current state with store.value.

const count = counterStore.value.count;

Update State

Use store.setState with built-in Immer support.

counterStore.setState((state) => {
  state.count++;
});

Connect to Components

Use useStoreValue for automatic re-renders on state changes.

import { useStoreValue } from "zenbox";

function Counter() {
  const { count } = useStoreValue(counterStore);

  function increment() {
    counterStore.setState((state) => {
      state.count++;
    });
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Vue-style Reactivity

Unlock reactive programming patterns with Vue-inspired hooks.

function DoubleCount() {
  const doubleCount = useComputed(() => counterStore.value.count * 2);

  return <p>Double Count: {doubleCount}</p>;
}

function CountWatcher() {
  useWatch(
    () => counterStore.value.count,
    (current, prev) => {
      console.log("Count changed from", prev, "to", current);
    }
  );

  useWatchEffect(() => {
    if (counterStore.value.count > 10) {
      console.log("Count exceeded 10!");
    }
  });

  return <p>Watching count changes...</p>;
}

Next Steps: Check out the Usage Guide for advanced patterns and best practices.