Back to App
HookSmith Docs

Generated React Hooks

HookSmith generates a fully type-safe, custom React hook for your specific contract. This hook wraps Wagmi v2 functionality into an easy-to-use interface.

Hook Structure

The generated hook (e.g., useMyContract) exposes all your contract's read and write functions as simple methods.

const { 
  // Read Functions
  balanceOf,
  tokenURI,
  
  // Write Functions
  mint,
  transfer,
  
  // State
  address,
  isLoading 
} = useMyContract();

How to Use

1. Reading Data

Read functions use strict typing for arguments and return values.

// Read token balance
const { data: balance, isLoading } = balanceOf({
  itemIndex: 0n // BigInt support
});

if (isLoading) return <div>Loading...</div>;
console.log("Balance:", balance);

2. Writing Data

Write functions handle the transaction lifecycle automatically.

const { write, isPending, isSuccess } = mint();

// Trigger transaction
<button 
  onClick={() => write({ 
    to: "0x123...", 
    amount: 100n 
  })}
  disabled={isPending}
>
  {isPending ? 'Minting...' : 'Mint Tokens'}
</button>

Features

  • Automatic Type Inference: Arguments match your Solidity types exactly.
  • BigInt Support: Handles uint256/int256 safely using JavaScript BigInt.
  • Error Handling: Standardized error states for both reads and writes.
  • Wagmi Integration: Built on top of the industry-standard Wagmi library.