@ic-reactor/react is a comprehensive React library designed to streamline interactions with the Internet Computer (IC) blockchain. It provides React hooks and utilities for efficient state management, authentication, and interaction with IC actors.
- React Hooks Integration: Custom hooks for managing blockchain actor states and authentication within React applications.
- Type-Safe Actor Interactions: Type-safe interaction with IC actors using the provided actor declaration file.
- Efficient State Management: Utilize the power of Zustand for global state management in React components.
- Asynchronous Data Handling: Easy handling of asynchronous operations related to IC actors.
- Authentication Support: Integrated hooks for managing authentication with the IC blockchain.
- Auto-Refresh and Query Capabilities: Support for auto-refreshing data and querying IC actors.
Install the package using npm:
npm install @ic-reactor/reactor using yarn:
yarn add @ic-reactor/reactHere's a simple example to get you started:
First, create an actor declaration file:
// actor.ts
import { canisterId, idlFactory, actor } from "declaration/actor"
import { createReactor } from "@ic-reactor/react"
type Actor = typeof actor
export const { useActorStore, useAuth, useQueryCall } = createReactor<Actor>({
canisterId,
idlFactory,
host: "https://localhost:4943",
})Then, use the useQueryCall hook to call your canister method:
// Balance.tsx
import { useQueryCall } from "./actor"
const Balance = ({ principal }) => {
const { call, data, loading, error } = useQueryCall({
functionName: "get_balance",
args: [principal],
refetchInterval: 1000,
refetchOnMount: true,
onLoading: () => console.log("Loading..."),
onSuccess: (data) => console.log("Success!", data),
onError: (error) => console.log("Error!", error),
})
return (
<div>
<button onClick={call} disabled={loading}>
{loading ? "Loading..." : "Refresh"}
</button>
{loading && <p>Loading...</p>}
{data && <p>Balance: {data}</p>}
{error && <p>Error: {error}</p>}
</div>
)
}
export default Balance@ic-reactor/react provides a custom hook for managing authentication with the IC blockchain. To use it, first create an authentication declaration file:
// Login.tsx
import { useAuth } from "./actor"
const Login = () => {
const {
login,
logout,
loginLoading,
loginError,
identity,
authenticating,
authenticated,
} = useAuth()
return (
<div>
<h2>Login:</h2>
<div>
{loginLoading && <div>Loading...</div>}
{loginError ? <div>{JSON.stringify(loginError)}</div> : null}
{identity && <div>{identity.getPrincipal().toText()}</div>}
</div>
{authenticated ? (
<div>
<button onClick={logout}>Logout</button>
</div>
) : (
<div>
<button onClick={login} disabled={authenticating}>
Login
</button>
</div>
)}
</div>
)
}
export default Login