Codec Demo

Demonstrates the automatic type transformation system comparing DisplayReactor vs regular Reactor.

Features Demonstrated

BigInt → string transformations
Principal → text transformations
Optional unwrapping ([T] | [] → T | null)
Variant normalization with _type discriminator
Side-by-side comparison of raw vs display types
Bidirectional transformation (input and output)

Links

Open in StackBlitz Edit and run in your browser

View on GitHub Browse the source code

Live Preview

Type Transformation Reference

Candid Type	Raw TypeScript	Display (transformed)
`nat` / `int`	`bigint`	`string`
`principal`	`Principal`	`string`
`opt T`	`[T] \| []`	`T \| null`
`blob` (≤96 bytes)	`Uint8Array`	`string` (hex)
`variant { A }`	`{ A: null }`	`{ _type: "A" }`

Key Code

import { Reactor, DisplayReactor } from "@ic-reactor/react"

// Regular Reactor - raw Candid types
const rawReactor = new Reactor<_SERVICE>({
  clientManager,
  idlFactory,
  canisterId: "...",
})

// DisplayReactor - transformed types for UI
const displayReactor = new DisplayReactor<_SERVICE>({
  clientManager,
  idlFactory,
  canisterId: "...",
})

// Raw: data.balance is bigint
const raw = await rawReactor.callMethod({ functionName: "getBalance", args: [...] })

// Display: data.balance is string
const display = await displayReactor.callMethod({ functionName: "getBalance", args: [...] })