Vite Plugin Demo

This example demonstrates the @ic-reactor/vite-plugin in action. It shows how the plugin transforms your .did files into fully typed React hooks automatically, with zero manual configuration.

Features Demonstrated

• Zero Config: No manual declaration generation needed.
• Hot Module Replacement: Modify your .did file and watch the hooks update instantly.
• Automatic Client Manager: The plugin ensures your ClientManager is correctly configured for the canister.
• Local Dev Proxy: Seamless communication with local replica via Vite’s proxy.

Links

Open in StackBlitz Edit and run in your browser

View on GitHub Browse the source code

Live Preview

Implementation

The core of this example is the vite.config.ts setup:

vite.config.ts

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import { icReactorPlugin } from "@ic-reactor/vite-plugin"

export default defineConfig({
  plugins: [
    react(),
    icReactorPlugin({
      canisters: [
        {
          name: "backend",
          didFile: "./backend/backend.did",
        },
      ],
    }),
  ],
})

By default, the plugin generates hooks in src/lib/canisters/backend/index.ts, which you can then import as:

import { useActorQuery } from "./lib/canisters/backend"

function App() {
  const { data } = useActorQuery({ functionName: "greet", args: ["IC"] })
  return <div>{data}</div>
}