On this page

React Hooks

Type-safe React hooks for Ethereum. Build your own custom wallet connection UI with full control over the user experience.

Best for custom UIs. Use React Hooks when you want to design your own wallet connection flow.

Available Libraries

Library	Description
Wagmi	React hooks for EVM account, signing, and transaction state

When to Use

Use React Hooks when you:

Need full control over the wallet connection UI
Want type-safe hooks for Ethereum interactions
Are building a React application
Don’t need a pre-built wallet selection modal

Quick Example

Set up WagmiProvider and QueryClientProvider using the wagmi guide first. This component uses the configured connectors.


import { useAccount, useConnect, useDisconnect } from 'wagmi'
 
function ConnectButton() {
  const { address, isConnected } = useAccount()
  const { connect, connectors, isPending, error } = useConnect()
  const { disconnect } = useDisconnect()
 
  if (isConnected) {
    return (
      <div>
        <p>{address}</p>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    )
  }
 
  return (
    <div>
      {connectors.map((connector) => (
        <button key={connector.uid} disabled={isPending} onClick={() => connect({ connector })}>
          Connect {connector.name}
        </button>
      ))}
      {error && <p role="alert">{error.message}</p>}
    </div>
  )
}

Alternative: With Wallet UI

If you want a pre-built wallet selection modal, consider:

RainbowKit - React wallet chooser
Web3Modal - Reown wallet connection UI