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	The most popular React hooks library for Ethereum

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


import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { injected } from 'wagmi/connectors'
 
function ConnectButton() {
  const { address, isConnected } = useAccount()
  const { connect } = useConnect()
  const { disconnect } = useDisconnect()
 
  if (isConnected) {
    return (
      <div>
        <p>{address}</p>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    )
  }
 
  return (
    <button onClick={() => connect({ connector: injected() })}>
      Connect Wallet
    </button>
  )
}

Alternative: With Wallet UI

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

RainbowKit - Beautiful React wallet modal
Web3Modal - WalletConnect’s official UI