本页目录

React Hooks

用于以太坊的类型安全 React hooks。自行构建钱包连接 UI，控制完整的交互流程。

最适合自定义 UI。 当你想要设计自己的钱包连接流程时，使用 React Hooks。

可用库

库	说明
Wagmi	管理 EVM 账户、签名和交易状态的 React hooks

何时使用

在以下情况使用 React Hooks：

需要完全控制钱包连接 UI
想要类型安全的以太坊交互 hooks
正在构建 React 应用
不需要预构建的钱包选择弹窗

快速示例

先按 wagmi 指南配置 WagmiProvider 和 QueryClientProvider。此组件使用已配置的连接器。


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>
  )
}

替代方案：带钱包 UI

如果需要现成的钱包选择弹窗，可使用：

RainbowKit — React 钱包选择界面。
Web3Modal — Reown 钱包连接界面。