Skip to main content

React Hooks

React Hooks are suitable for projects that want to fully control the wallet connection UI. You can only reuse state logic such as connection, account, signature, and disconnection, and leave the buttons, pop-up windows, error prompts, and layout to your own design system.

ℹ️

**Suitable for custom UI. ** If the preset wallet pop-up window does not meet the product experience, you can access it from the Hooks layer and organize the interaction yourself.

Available libraries​

Librarydetails
WagmiReact Hooks toolset for EVM applications

Best Fit​

The following scenarios are more suitable to start with React Hooks:

  • It is necessary to fully customize the wallet entrance, connection pop-up window or account display.
  • The project already uses React and wants to retain type-safe encapsulation of on-chain interactions.
  • There is no desire to introduce pre-built wallet selectors or need to be consistent with existing component libraries.
  • Just want to access the necessary wallet states and actions, not the full UI suite.

Quick example​

import { useAccount, useConnect, useDisconnect } from "wagmi";
import { injected } from "wagmi/connectors";

function WalletEntryButton() {
  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 prefer to use the mature wallet selection pop-up window directly, you can refer to:

  • RainbowKit - ​​A finished connection interface suitable for the React/Wagmi ecosystem
  • Web3Modal - ​​Suitable for scenarios requiring WalletConnect, QR code and multi-frame support