defineReactor

Call Signature

defineReactor<Service>(params): DefineReactorResult<Service, "display", DisplayReactor<Service, "display">>

Defined in: react/src/defineReactor.ts:51

The display: true form: builds a DisplayReactor and its hooks.

Type Parameters

Service

Service = BaseActor

Parameters

params

DefineDisplayReactorParameters<Service>

Returns

DefineReactorResult<Service, "display", DisplayReactor<Service, "display">>

Deprecated

defineReactor({ display: true }) is deprecated: pass the same options, without display, to defineDisplayReactor(...). Only this form is; defineReactor without display builds a plain Reactor and is not deprecated. The flag keeps working until the next major, but it makes every bundle that calls defineReactor carry DisplayReactor and zod, even when it never sets the flag.

Call Signature

defineReactor<Service>(params): DefineReactorResult<Service, "candid", Reactor<Service, "candid">>

Defined in: react/src/defineReactor.ts:117

One-call bootstrap for a canister reactor + its React hooks.

Collapses the four manual steps (QueryClient → ClientManager → Reactor → createActorHooks) into a single call. It builds a Reactor, which takes and returns raw Candid values; defineDisplayReactor takes the same options and builds a DisplayReactor for UI-friendly ones. Use this when one-call bootstrap is enough. If you need reusable method-specific operations outside React, compose with query/mutation factories after setup.

Type Parameters

Service

Service = BaseActor

Parameters

params

DefineReactorParameters

Returns

DefineReactorResult<Service, "candid", Reactor<Service, "candid">>

Examples

import { defineReactor } from "@ic-reactor/react"
import { idlFactory, type _SERVICE } from "./declarations/backend"

const { reactor, useActorQuery, useActorMutation } = defineReactor<_SERVICE>({
  name: "backend",
  idlFactory,
  canisterId: "rrkah-fqaaa-aaaaa-aaaaq-cai",
})

function Profile() {
  const { data } = useActorQuery({ functionName: "get_profile" })
  return <div>{data?.name}</div>
}

Reuse an existing ClientManager (multiple canisters share one agent)

const ledger = defineReactor<_LEDGER>({
  name: "ledger",
  idlFactory: ledgerIdl,
  canisterId: "ryjl3-tyaaa-aaaaa-aaaba-cai",
})
const index = defineReactor<_INDEX>({
  name: "index",
  idlFactory: indexIdl,
  canisterId: "qhbym-qaaaa-aaaaa-aaafq-cai",
  clientManager: ledger.clientManager,
  authentication: ledger.authentication, // one Internet Identity session
})

Internet Identity is wired up out of the box

const { useAuth, useIdentityAttributes } = defineReactor<_SERVICE>({
  name: "backend",
  idlFactory,
  canisterId: "rrkah-fqaaa-aaaaa-aaaaq-cai",
  // Needed when the app is served from more than one origin.
  auth: { derivationOrigin: "https://app.example.com" },
})

function LoginButton() {
  const { login, logout, isAuthenticated, principal } = useAuth()
  return isAuthenticated
    ? <button onClick={() => logout()}>{principal?.toText()}</button>
    : <button onClick={() => login()}>Sign in</button>
}