Getting Started

Getting Started

Install

React apps

pnpm add @ic-reactor/react @icp-sdk/core @tanstack/react-query

Non-React apps

pnpm add @ic-reactor/core @icp-sdk/core @tanstack/query-core

Optional packages

pnpm add @icp-sdk/auth
pnpm add @ic-reactor/candid @ic-reactor/parser

Generate Canister Declarations

IC Reactor needs generated declarations for full type safety. The recommended choices are:

1. @ic-reactor/vite-plugin for Vite apps
2. @ic-reactor/cli for explicit or non-Vite workflows
3. existing generators like dfx generate or @icp-sdk/bindgen if your app already uses them

Minimal React Setup

// src/reactor.ts
import { ClientManager, Reactor, createActorHooks } from "@ic-reactor/react"
import { QueryClient } from "@tanstack/react-query"
import { idlFactory, type _SERVICE } from "./declarations/backend"

export const queryClient = new QueryClient()

export const clientManager = new ClientManager({
  queryClient,
})

export const backend = new Reactor<_SERVICE>({
  clientManager,
  idlFactory,
  name: "backend",
  canisterId: "rrkah-fqaaa-aaaaa-aaaaq-cai",
})

export const { useActorQuery, useActorMutation } = createActorHooks(backend)

// src/App.tsx
function Greeting() {
  const { data, isPending } = useActorQuery({
    functionName: "greet",
    args: ["World"],
  })

  if (isPending) return <div>Loading...</div>
  return <div>{data}</div>
}

What To Read Next

• Package Overview
• React Patterns
• Code Generation
• Local Development