@xstate/store-preact

The @xstate/store-preact package provides Preact bindings for XState Store. It includes hooks for subscribing to store state, creating component-scoped stores, and using atoms.

These are the docs for @xstate/store-preact v2. For v1 docs, see v1 docs.

This package re-exports all of @xstate/store, so you only need to install @xstate/store-preact.

Installation

npm install @xstate/store-preact

pnpm install @xstate/store-preact

yarn add @xstate/store-preact

Quick start

import { createStore, useSelector } from '@xstate/store-preact'; 

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

function Counter() {
  const count = useSelector(store, (state) => state.context.count);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => store.trigger.inc()}>+1</button>
      <button onClick={() => store.trigger.inc({ by: 5 })}>+5</button>
    </div>
  );
}

API

`useSelector(store, selector?, compare?)`

Subscribes to a store or atom and returns a selected value. The component re-renders when the selected value changes.

`useStore(configOrLogic, input?)`

Creates a component-scoped store instance from a store config or store logic.

import { createStoreLogic, useSelector, useStore } from '@xstate/store-preact'; 

const counterLogic = createStoreLogic({
  context: (input: { initialCount: number }) => ({
    count: input.initialCount,
  }),
  on: {
    inc: (context) => ({ count: context.count + 1 }),
  },
});

function Counter() {
  const store = useStore(counterLogic, { initialCount: 0 });
  const count = useSelector(store, (state) => state.context.count);

  return <button onClick={() => store.trigger.inc()}>{count}</button>;
}

If the store logic requires input, the input argument is required.

`useAtom(atomOrConfig, selectorOrInput?, compare?)`

Subscribes to an atom and returns its value. You can pass an existing atom, or an atom config created with createAtomConfig(...).

import { createAtomConfig, useAtom } from '@xstate/store-preact'; 

const countConfig = createAtomConfig((input: { initialCount: number }) => {
  return input.initialCount;
});

function Counter() {
  const count = useAtom(countConfig, { initialCount: 0 });

  return <div>Count: {count}</div>;
}

`useAtomState(atomOrConfig, input?)`

Creates or subscribes to an atom for the lifetime of a Preact component. It returns the current value and the live atom instance.

import { createAtomConfig, useAtomState } from '@xstate/store-preact'; 

const countConfig = createAtomConfig((input: { initialCount: number }) => {
  return input.initialCount;
});

function Counter() {
  const [count, countAtom] = useAtomState(countConfig, { initialCount: 0 });

  return (
    <button onClick={() => countAtom.set((count) => count + 1)}>
      {count}
    </button>
  );
}

Full documentation

For complete XState Store documentation including context, transitions, effects, atoms, and more, see the XState Store docs.

@xstate/store-preact

On this page