React hooks by Wagmi
A modular, type-safe React library providing hooks to build high-performance Ethereum blockchain frontends.
Overview
Wagmi is a React-based library designed to simplify and accelerate the development of Ethereum blockchain frontends. It offers a comprehensive set of over 20 React hooks that cover essential blockchain interactions such as managing accounts, wallets, contracts, transactions, signing messages, and Ethereum Name Service (ENS) operations. The library is built with TypeScript support, enabling developers to infer types directly from contract ABIs and EIP-712 typed data, which enhances developer productivity and reduces runtime errors.
Wagmi is modular and extensible by design. While it primarily targets React developers, it also supports Vue and VanillaJS through adapters, making it flexible for various frontend frameworks. It integrates official wallet connectors including MetaMask, WalletConnect, Coinbase Wallet, and supports the emerging EIP-6963 standard for wallet connections. Wagmi leverages TanStack Query for built-in caching, deduplication, and persistence of blockchain data, improving performance and user experience.
Under the hood, Wagmi is built on Viem, a modern low-level TypeScript Ethereum interface that handles blockchain operations efficiently. This architecture allows Wagmi to provide a high-performance, type-safe, and developer-friendly environment for building decentralized applications (dapps). Developers can get started quickly by installing the React package and importing hooks for common blockchain tasks. Extensive documentation and guides cover wallet connection, contract reading and writing, transaction handling, error management, and more.
The Problem
Developers building Ethereum frontends face challenges integrating wallet connections, managing blockchain state, and handling asynchronous contract interactions with type safety and performance. Existing libraries often lack modularity, extensibility, or comprehensive TypeScript support, leading to boilerplate code and potential runtime errors.
The Solution
Key Features
20+ React hooks
Hooks for accounts, wallets, contracts, transactions, signing, ENS, and more.
TypeScript ready
Strong typing support for safer and more productive development.
Wallet connection management
Official connectors and hooks to connect, disconnect, and switch wallets and chains.
Contract interaction hooks
Read and write contract data, deploy contracts, and simulate transactions.
Event and transaction monitoring
Hooks to watch contract events, pending transactions, and transaction receipts.
Key Strengths
How Developers Use React hooks by Wagmi
Building a DeFi dashboard
Developers use Wagmi hooks to connect user wallets, fetch token balances, read contract states, and send transactions with type safety and caching.
NFT marketplace frontend
Wagmi enables seamless wallet integration, ENS resolution, and contract interactions for minting, buying, and selling NFTs.
DAO governance app
Use Wagmi to manage wallet connections, sign governance proposals, monitor voting events, and track transaction statuses.
Works Well With
Ethereum
Polygon PoS
Optimism
Arbitrum One
EVM Chains
Ship faster than your competition
Free RPC across 77+ chains. Spin up an endpoint in under 30 seconds.
Compare
View Full Comparison| Composability | |||
| Cross-Chain | |||
| Customizability | |||
| Developer Support | |||
| Ease of Integration | |||
| Performance |
Add a related tool
React hooks by Wagmi Alternatives
Explore web3 competitors and apps like React hooks by Wagmi.
Streams
Hosted Hardhat
Virtual TestNets
Rarible
MyWish
Network APIs
Tenderly Monitoring
0x
Blockchain Data Indexing
Balancer
Pricing
Free | |
|---|---|
| Price (Monthly) | Free |
| Price (Annual) | Free |
| Messaging | N/A |
| Support | Community support via GitHub Discussions |
| Analytics |
Start Building Now
Reliable RPC, powerful APIs, and zero hassle.
Resources
Wagmi provides extensive documentation, including API references for over 20 React hooks, guides for wallet connection, contract interaction, error handling, and migration from previous versions. The site also offers comparisons with other libraries, TypeScript support details, and integration examples.