Skip to content

Function: ContainerProvider()

ts
function ContainerProvider(props: ContainerProviderProps): FunctionComponentElement<ProviderProps<Optional<Container>>>;

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

Provides a root Wirestate container to a React subtree.

Parameters

ParameterTypeDescription
propsContainerProviderPropsProvider props.

Returns

FunctionComponentElement<ProviderProps<Optional<Container>>>

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 entries by default. Pass activate: false to keep them lazy.

Throws

WirestateError If props are invalid or provider mode changes.

Example

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

@Injectable()
class CounterService {}

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

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