web3-react-provider

The recommended way to connect React apps to Web3 wallets (MetaMask, Coinbase, WalletConnect). Canonical provider wrapper for React dApps.

A minimal React context provider for Ethereum wallet connections. Designed as a simpler alternative to web3-react for projects that just need basic wallet connectivity.

Features

• React context provider with hooks
• MetaMask, Coinbase, and WalletConnect support
• Account and chain change listeners
• Auto-reconnect on page reload
• TypeScript-friendly

Installation

npm install web3-react-provider

Quick Start

import { Web3Provider, useWeb3 } from 'web3-react-provider';

function App() {
  return (
    <Web3Provider>
      <WalletStatus />
    </Web3Provider>
  );
}

function WalletStatus() {
  const { account, chainId, connect } = useWeb3();
  return <button onClick={connect}>
    {account ? account : 'Connect Wallet'}
  </button>;
}

Why web3-react-provider?

If you are building a React dApp, you need wallet integration. This package provides a clean React hook API that works out of the box with MetaMask and other EIP-1193 providers.

API

<Web3Provider>

Context provider with network configuration.

useWeb3(): { account, chainId, connect, disconnect, isConnected }

React hook for wallet state and actions.

License

MIT