@xstate/store-react

React adapter for @xstate/store.

Installation

``bash
npm install @xstate/store-react
`

Quickstart

`tsx
import { createStore, useSelector } from '@xstate/store-react';
// ...

const store = createStore({
context: { count: 0 },
on: {
inc: (ctx) => ({ ...ctx, count: ctx.count + 1 })
}
});

const App = () => {
const count = useSelector(store, (s) => s.context.count);

return (
store.send({ type: 'inc' })}>Count: {count}
);
};
`

API

$3

Subscribes to a store and returns a selected value.

`tsx
import { createStore, useSelector } from '@xstate/store-react';
// ...

const store = createStore({
context: { count: 0 },
on: {
inc: (ctx) => ({ ...ctx, count: ctx.count + 1 })
}
});

const App = () => {
const count = useSelector(store, (s) => s.context.count);
// or without selector (returns full snapshot)
const snapshot = useSelector(store);
// ...
};
`

Arguments:

- store - Store created with createStore()
- selector? - Function to select a value from snapshot
- compare? - Equality function (default: ===)

Returns: Selected value (re-renders on change)

---

$3

Creates a store instance scoped to a component.

`tsx
import { useStore, useSelector } from '@xstate/store-react';
// ...

const App = () => {
const store = useStore({
context: { count: 0 },
on: {
inc: (ctx) => ({ ...ctx, count: ctx.count + 1 })
}
});

const count = useSelector(store, (s) => s.context.count);
// ...
};
`

Arguments:

- definition - Store configuration object

Returns: Store instance (stable across re-renders)

---

$3

Subscribes to an atom and returns its value.

`tsx
import { createAtom, useAtom } from '@xstate/store-react';
// ...

const countAtom = createAtom(0);

const App = () => {
const count = useAtom(countAtom);

return countAtom.set((c) => c + 1)}>{count};
};
`

Arguments:

- atom - Atom created with createAtom()
- selector? - Selector function
- compare? - Equality function

Returns: Atom value (re-renders on change)

---

$3

Creates a custom hook that returns [selectedValue, store].

`tsx
import { createStoreHook } from '@xstate/store-react';
// ...

const useCountStore = createStoreHook({
context: { count: 0 },
on: {
inc: (ctx, e: { by: number }) => ({ ...ctx, count: ctx.count + e.by })
}
});

const App = () => {
const [count, store] = useCountStore((s) => s.context.count);

return store.trigger.inc({ by: 1 })}>{count};
};
`

Arguments:

- definition - Store configuration object

Returns: Custom hook function

---

Re-exports

All exports from @xstate/store are re-exported, including createStore, createStoreWithProducer, createAtom`, and more.

See the XState Store docs for the full API, and the React-specific docs for more React examples.