@j13b/react-state

React bindings for @j13b/state — hooks for subscribing to Signals, Runners, and broadcasts from React components.

Install

npm install @j13b/react-state @j13b/state

Peer dependencies: @j13b/state (^0.2.0), react (^18.2.0), and react-dom (^18.2.0).

Quick start

import { Signal } from "@j13b/state";
import { useSignalValue } from "@j13b/react-state";

const counter = new Signal(0);

function Counter() {
  const value = useSignalValue(counter.broadcast);
  return <button onClick={() => counter.set(value + 1)}>Count: {value}</button>;
}

Hooks

| Hook | Returns / does | |---|---| | useSignalValue(broadcast) | Current value; re-renders on change. | | useSignalValueEffect(cb, broadcast) | Runs cb on value changes without re-rendering. | | useUpdate() | A function that forces a re-render. | | useRunnerStatus(broadcast) | The runner's Status (INITIAL, PENDING, SUCCESS, ERROR). | | useRunnerStatusEffect(cb, task) | Runs cb on status changes. | | useRunnerError(task) | The runner's current Error \| null. | | useRunnerErrorEffect(cb, task) | Runs cb on error changes. | | useRunnerProgress(task) | The runner's progress (0–1). | | useRunnerProgressEffect(cb, task) | Runs cb on progress changes. | | useRunnerFeedback(task) | The runner's feedback message. | | useRunnerFeedbackEffect(cb, task) | Runs cb on feedback changes. |

This package pairs with @j13b/state, which provides the framework-agnostic primitives (Signal, Runner, DerivedSignal, events, and helpers) that these hooks subscribe to.

Scripts

npm run build         # vite + dts → dist/
npm run check:types   # tsc --noEmit
npm test              # vitest watch
npm run test:run      # vitest run (CI)

Origins

These hooks were extracted from @j13b/state, which is a fork of @tcn/state (Copyright 2024 TCN). See NOTICE for upstream attribution.

License

Apache License 2.0 — see LICENSE.