@grimoire-intel/clavicula-react

React adapter for Clavicula.

Installation

npm install @grimoire-intel/clavicula @grimoire-intel/clavicula-react

Usage

import { createStore } from '@grimoire-intel/clavicula';
import { useStore } from '@grimoire-intel/clavicula-react';

const counterStore = createStore({ count: 0 });

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

  return (
    <button onClick={() => counterStore.set(s => ({ count: s.count + 1 }))}>
      Count: {count}
    </button>
  );
}

With selector

// Only re-render when `count` changes
const count = useStore(counterStore, s => s.count);

With derived stores

import { derived } from '@grimoire-intel/clavicula';

const doubled = derived(counterStore, s => s.count * 2);

function Doubled() {
  const value = useStore(doubled);
  return <span>{value}</span>;
}

API

function useStore<T>(store: Store<T>): T;
function useStore<T, U>(store: Store<T>, selector: (state: T) => U): U;

Uses useSyncExternalStore internally for concurrent-safe subscriptions.

See the main documentation for full API reference.