@wirestate/react [monorepo] [docs]

React bindings for Wirestate containers.

Use this package to provide a Wirestate container to a React tree, inject services from components, and register component-scoped event, command, and query handlers.

Install

npm install @wirestate/core @wirestate/react

Start

import { Injectable } from "@wirestate/core";
import { ContainerProvider, useInjection } from "@wirestate/react";

@Injectable()
class CounterService {
  public count = 0;
}

function CounterView() {
  const counter = useInjection(CounterService);

  return <span>{counter.count}</span>;
}

export function Application() {
  return (
    <ContainerProvider config={{ bindings: [CounterService] }}>
      <CounterView />
    </ContainerProvider>
  );
}

What Is Included

This package wires services into React. It does not make service fields reactive by itself; pair it with @wirestate/react-mobx, @wirestate/react-signals, or your own React reactivity adapter when components need to re-render from service changes.

During development, @wirestate/dev swaps the containers a provider owns when a service module changes, so React state, DOM state, and form inputs survive the edit.

Learn More

• React guide
• API reference

License

MIT