createRunBinding - API reference

API reference › @evolu/react › createRunBinding

function createRunBinding<
  R extends DisposableRun<any> = DisposableRun<unknown>,
>(): {
  RunContext: FC<{
    children?: ReactNode;
    value: Run<R extends DisposableRun<D> ? D : never>;
  }>;
  useRun: () => Run<R extends DisposableRun<D> ? D : never>;
};

Defined in: Task.ts:75

Creates typed React Context and hook for Run.

The DisposableRun type argument is used to infer the deps type for the returned API, which exposes only Run.

useRun throws when the provider is missing.

Example

import { assertEqual, createRun } from "@evolu/common";
import { createRunBinding } from "@evolu/react";
import type { FC } from "react";
import { renderToString } from "react-dom/server";

interface GreetingDep {
  readonly greeting: string;
}

await using run = createRun<GreetingDep>({ greeting: "Hello" });
const { RunContext, useRun } = createRunBinding<typeof run>();

const Greeting: FC = () => <p>{useRun().deps.greeting}</p>;

assertEqual(
  renderToString(
    <RunContext value={run}>
      <Greeting />
    </RunContext>,
  ),
  "<p>Hello</p>",
);

Testing

Provide a Run with test dependencies to the app's RunContext.

import { assertEqual, testCreateRun, type DisposableRun } from "@evolu/common";
import { createRunBinding } from "@evolu/react";
import type { FC } from "react";
import { renderToString } from "react-dom/server";

interface GreetingDep {
  readonly greeting: string;
}

const { RunContext, useRun } = createRunBinding<DisposableRun<GreetingDep>>();
const Greeting: FC = () => <p>{useRun().deps.greeting}</p>;

await using run = testCreateRun({ greeting: "Hi" });

assertEqual(
  renderToString(
    <RunContext value={run}>
      <Greeting />
    </RunContext>,
  ),
  "<p>Hi</p>",
);