createEvoluBinding - API reference

API reference › @evolu/react › createEvoluBinding

function createEvoluBinding<
  S extends Readonly<
    Record<string, Readonly<Record<string, AnyStandardSchemaV1>>>
  > = Readonly<Record<string, Readonly<Record<string, AnyStandardSchemaV1>>>>,
  D extends Readonly<
    Record<string, Readonly<Record<string, AnyStandardSchemaV1>>>
  > = EmptyEvoluSchema,
>(): ReactBinding<S, D>;

Defined in: local‑first/createEvoluBinding.ts:258

Creates a React binding for a specific EvoluSchema.

The created binding contains the context components and all hooks needed by React components using an Evolu instance created from that schema. For an app of createEvoluApp, EvoluAppProvider provides the app and the instance of the AppOwner the tab has open, and the device hooks, useDeviceEvolu, useDeviceQuery, and useDeviceQueries, read its device database.

The type arguments configure the binding without passing a schema at runtime: S is the app's EvoluSchema, and D the schema of its device tables, which the device hooks take, without tables by default.

Example

import {
  assertType,
  createQueryBuilder,
  testEvoluSchema,
  type AppOwnerEvolu,
  type QueryRows,
  type TestEvoluSchema,
} from "@evolu/common";
import { createEvoluBinding } from "@evolu/react";

// Create the binding once and share it with components.
const { EvoluContext, useEvolu, useQuery } =
  createEvoluBinding<typeof testEvoluSchema>();

const createQuery = createQueryBuilder(testEvoluSchema);
const allTodos = createQuery((db) => db.selectFrom("todo").selectAll());
const useTodos = () => useQuery(allTodos);

assertType<
  [
    Parameters<typeof EvoluContext>[0]["value"],
    ReturnType<typeof useEvolu>,
    ReturnType<typeof useTodos>,
  ],
  [
    AppOwnerEvolu<TestEvoluSchema>,
    AppOwnerEvolu<TestEvoluSchema>,
    QueryRows<typeof allTodos.Row>,
  ]
>();