React Integration

@quantajs/react provides React-specific hooks and components on top of @quantajs/core.

Installation

npm install @quantajs/react @quantajs/core
# or
pnpm add @quantajs/react @quantajs/core
# or
yarn add @quantajs/react @quantajs/core

Provider Pattern

import { createStore, QuantaProvider, useStore } from '@quantajs/react';

const counterStore = createStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

function Counter() {
  const counter = useStore('counter');
  return <button onClick={() => counter.increment()}>{counter.count}</button>;
}

export default function App() {
  return (
    <QuantaProvider stores={{ counter: counterStore }}>
      <Counter />
    </QuantaProvider>
  );
}

Hook Reference (Practical)

useStore(name)

Returns the full store instance from QuantaProvider context.

const userStore = useStore('user');
userStore.updateProfile({ name: 'Ava' });

useStoreSelector(name, selector)

Returns selected data from a context store and re-renders only when that selection changes.

import { useStoreSelector } from '@quantajs/react';

const userName = useStoreSelector('user', (s) => s.user?.name);

useQuantaStore(store)

Subscribes to a direct store reference and returns the full store.

import { useQuantaStore } from '@quantajs/react';

const todos = useQuantaStore(todoStore);

useQuantaSelector(store, selector)

Selector variant for direct store references.

import { useQuantaSelector } from '@quantajs/react';

const todoCount = useQuantaSelector(todoStore, (s) => s.todos.length);

useCreateStore(name, state, getters?, actions?)

Creates a component-scoped store instance and destroys it on unmount.

import { useCreateStore } from '@quantajs/react';

function DraftEditor() {
  const draft = useCreateStore(
    'draft-editor',
    () => ({ text: '' }),
    undefined,
    {
      setText(value: string) {
        this.text = value;
      },
    },
  );

  return <textarea value={draft.text} onChange={(e) => draft.setText(e.currentTarget.value)} />;
}

Multiple Stores

<QuantaProvider stores={{ user: userStore, todos: todoStore }}>
  <Dashboard />
</QuantaProvider>

Then consume by name:

const user = useStore('user');
const todos = useStore('todos');

React DevTools Component

import { QuantaDevTools } from '@quantajs/react';

function AppShell() {
  return (
    <>
      <App />
      <QuantaDevTools />
    </>
  );
}

Tips

  • Prefer useStoreSelector / useQuantaSelector for large views.
  • Keep store names stable and unique.
  • For temporary component state with actions/getters, prefer useCreateStore.