Skip to main content

Setup

The React adapter provides hooks to integrate xndr with React components.

Installation​

npm install @xndrjs/adapter-react
# or
pnpm add @xndrjs/adapter-react
# or
yarn add @xndrjs/adapter-react

Peer Dependencies​

  • react >= 18.0.0
  • react-dom >= 18.0.0

Overview​

The React adapter provides hooks that connect StatePort instances to React's reactivity system:

  • useReactiveValue - Subscribe to a StatePort and re-render when the value changes
  • useStatePort - Convert React useState to a StatePort
  • useCreateStatePort - Create a StatePort with React state management
  • useFSM - Initialize an FSM context manager
  • useStableReference - Get a stable reference to a value

Quick Start​

import { useReactiveValue, useCreateStatePort } from '@xndrjs/adapter-react';
import { ReactiveValue, createComputed } from '@xndrjs/core';

// Use a reactive value in a component
function Counter() {
  const count = new ReactiveValue(0);
  const value = useReactiveValue(count);
  
  return (
    <div>
      <p>Count: {value}</p>
      <button onClick={() => count.set((prev) => prev + 1)}>
        Increment
      </button>
    </div>
  );
}

// Create a StatePort from React state
function TodoList() {
  const todosPort = useCreateStatePort<Todo[]>([]);
  const todos = useReactiveValue(todosPort);
  
  const addTodo = (todo: Todo) => {
    todosPort.set((prev) => [...prev, todo]);
  };
  
  return (
    <div>
      {todos.map(todo => <div key={todo.id}>{todo.text}</div>)}
      <button onClick={() => addTodo({ id: Date.now(), text: 'New todo' })}>
        Add Todo
      </button>
    </div>
  );
}

Next Steps​