@wirestate/react-signals [monorepo] [docs]

Preact Signals React reactivity binding for Wirestate React services.

Use this package together with @wirestate/signals: create signal state with @wirestate/signals, then read and subscribe to it from React components.

Install

npm install @wirestate/core @wirestate/react @wirestate/signals @wirestate/react-signals

Start

import { Injectable } from "@wirestate/core";
import { Signal, computed, signal } from "@wirestate/signals";

@Injectable()
class CounterService {
  public readonly count: Signal<number> = signal(0);
  public readonly isEven = computed(() => this.count.value % 2 === 0);

  public increment(): void {
    this.count.value++;
  }
}

import { useInjection } from "@wirestate/react";
import { useSignals } from "@wirestate/react-signals";

export const Counter = () => {
  useSignals();

  const counter = useInjection(CounterService);

  return <button onClick={() => counter.increment()}>{counter.count.value}</button>;
};

What Is Included

• React hooks from @preact/signals-react (useSignal, useComputed, useSignalEffect, useModel).
• Runtime exports from @preact/signals-react/runtime (useSignals, EffectStore, wrapJsx, ensureFinalCleanup).

Signal definitions (signal, computed, effect, and others) live in @wirestate/signals.

For automatic subscriptions when components read .value during render, configure the @preact/signals-react-transform. Without the transform, call useSignals() in those components.

Learn More

• React Signals guide
• API reference
• Preact Signals docs

License

MIT