Function: ContainerProvider()

function ContainerProvider(props: ContainerProviderProps): ReactElement;

Defined in: src/wirestate-react/provision/container-provider.ts:115

Provides a root Wirestate container to a React subtree.

Parameters

Parameter	Type	Description
props	ContainerProviderProps	Provider props.

Returns

ReactElement

React context provider for the active container.

Remarks

Two modes:

• External container: passed through, provisioned, never disposed.
• Managed config: created by the provider, provisioned, disposed on unmount.

Managed containers activate all bindings by default. Pass activate: false to keep them lazy.

Managed config is construction-only: it is read once when the provider mounts, and later changes are ignored. Pass a React key to the provider to recreate the container explicitly.

The container is provisioned in a layout effect, so messaging handlers are live before any descendant's useEffect runs and a child can emit, execute, or query from its mount effect. Three ordering limits remain, all from React committing effects child-first:

• A descendant's own useLayoutEffect still runs before this provider provisions. Send from useEffect instead.
• A nested ContainerProvider provisions its container before this one, so a child container's @OnProvision cannot reach a parent container's handler.
• On unmount the container deprovisions before a descendant's useEffect cleanup, so a child cannot send from its cleanup. Use @OnDeprovision on a service instead, which runs while the buses are still live.

Throws

WirestateError if props are invalid or provider mode changes.

Example

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

@Injectable()
class CounterService {}

export function Application() {
  const config = useMemo(() => ({ bindings: [CounterService] }), []);

  return (
    <ContainerProvider config={config}>
      <Counter />
    </ContainerProvider>
  );
}