Module react

@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.

Features

• 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.

Installation

Install the package using npm:

npm install @ic-reactor/react
Copy

or using yarn:

yarn add @ic-reactor/react
Copy

Usage

Here'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",
})
Copy

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 (
    

      
        {loading ? "Loading..." : "Refresh"}
      
      {loading && 
Loading...
}
      {data && 
Balance: {data}
}
      {error && 
Error: {error}
}
    
  )
}

export default Balance
Copy

Authentication

@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 (
    

      
Login:
      

        {loginLoading && 
Loading...
}
        {loginError ? 
{JSON.stringify(loginError)}
 : null}
        {identity && 
{identity.getPrincipal().toText()}
}
      
      {authenticated ? (
        

          Logout
        
      ) : (
        

          
            Login
          
        
      )}
    
  )
}

export default Login
Copy