@ic-reactor/react

@ic-reactor/react is the recommended package for React applications. It re-exports the runtime classes from @ic-reactor/core and adds hook factories, auth hooks, direct reactor hooks, and reusable query factories designed around TanStack Query.

Why Use This Package

You want idiomatic React hooks for queries, mutations, suspense, and auth.
You want ClientManager, Reactor, and DisplayReactor from one package.
You want to keep your app code focused on components instead of manual query wiring.

Installation

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

# Optional: Internet Identity support
pnpm add @icp-sdk/auth

What’s Included

React Setup Complete app wiring with QueryClientProvider, ClientManager, and a Reactor instance.

createActorHooks Generate typed canister hooks from a bound reactor instance.

createAuthHooks React hooks for login, logout, agent state, and user principal access.

Reactor Hooks Direct hooks that accept a reactor instance explicitly.

Factory Functions Reusable query and mutation factories for shared data access patterns.

Quick Start

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

const queryClient = new QueryClient()
const clientManager = new ClientManager({ queryClient, withCanisterEnv: true })

const backend = new Reactor<_SERVICE>({
  clientManager,
  idlFactory,
  name: "backend",
})

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

Identity Attributes

createAuthHooks(clientManager) also returns useIdentityAttributes() for signed OpenID email and profile attributes:

const { useIdentityAttributes } = createAuthHooks(clientManager)

function ContinueWithProvider() {
  const { requestOpenIdAttributes, isRequestingAttributes } =
    useIdentityAttributes()

  async function handleClick() {
    const nonce = await backend.registerBegin()

    const result = await requestOpenIdAttributes({
      nonce,
      openIdProvider: "microsoft",
      keys: ["email", "name"],
    })

    await backend.registerFinish({
      data: result.signedAttributes.data,
      signature: result.signedAttributes.signature,
    })
  }

  return (
    <button disabled={isRequestingAttributes} onClick={handleClick}>
      Continue with provider
    </button>
  )
}

Provider aliases ("google", "apple", and "microsoft") and full issuer URLs are supported. Always verify the signed payload server-side or in your canister before trusting decoded values.