Multiple Canisters

Real-world dApps often need to talk to multiple services: a Ledger, a Governance canister, and perhaps a custom backend. This example shows how to manage multiple actors efficiently sharing the same authentication state.

Features Demonstrated

• Shared ClientManager: One login session for all canisters.
• Multiple Reactors: Instantiating separate reactors for different IDLs (ICP Ledger vs Custom Token).
• Organization: Structuring code to keep canister logic separate.

Links

Open in StackBlitz Edit and run in your browser

View on GitHub Browse the source code

Live Preview

Best Practice: Centralized Reactor Definition

Defining all your actors in one place makes it easy to manage imports throughout your app.

src/reactor.ts

import { ClientManager, DisplayReactor } from "@ic-reactor/react"
import { idlFactory as icpIdl } from "./declarations/icp"
import { idlFactory as customIdl } from "./declarations/custom"

// 1. Shared Client Manager (handles Auth)
const clientManager = new ClientManager()

// 2. Define Reactors
export const icpReactor = new DisplayReactor({
  clientManager,
  canisterId: "ryjl3-tyaaa-aaaaa-aaaba-cai",
  idlFactory: icpIdl,
})

export const customReactor = new DisplayReactor({
  clientManager,
  canisterId: "rrkah-fqaaa-aaaaa-aaaaq-cai",
  idlFactory: customIdl,
})

// 3. Export Hooks
export const { useActorQuery: useIcpQuery } = createActorHooks(icpReactor)
export const { useActorQuery: useCustomQuery } = createActorHooks(customReactor)