eth-react-provider

A lightweight, TypeScript-first React library for managing Ethereum providers, wallet connections, and Web3 context in React applications.

eth-react-provider simplifies provider management by offering React Context, hooks, and components for interacting with Ethereum and EVM-compatible networks. Whether you're using ethers.js, viem, or web3.js, this library provides a clean and consistent developer experience.

import {
  EthereumProvider,
  useProvider
} from "eth-react-provider";

function App() {
  return (
    <EthereumProvider provider={provider}>
      <Dashboard />
    </EthereumProvider>
  );
}

Features ⚡

• React Context for Ethereum providers
• Provider management
• Wallet provider support
• RPC provider support
• Multiple provider support
• Provider switching
• Network switching
• Custom provider injection
• React Hooks API
• TypeScript-first
• Works with ethers.js
• Works with viem
• Works with web3.js
• Supports all EVM chains
• Lightweight and tree-shakable

Installation

npm install eth-react-provider

or

yarn add eth-react-provider

Getting Started

Wrap your application with EthereumProvider.

import {
  EthereumProvider
} from "eth-react-provider";

<EthereumProvider provider={provider}>
  <App />
</EthereumProvider>

useProvider

Access the active provider anywhere in your application.

import {
  useProvider
} from "eth-react-provider";

function Home() {
  const provider = useProvider();

  return (
    <div>
      Connected
    </div>
  );
}

useSigner

Access the connected wallet signer.

import {
  useSigner
} from "eth-react-provider";

function Wallet() {
  const signer = useSigner();

  async function sign() {
    const address = await signer.getAddress();

    console.log(address);
  }
}

useNetwork

Retrieve the active blockchain network.

import {
  useNetwork
} from "eth-react-provider";

function NetworkInfo() {
  const network = useNetwork();

  return (
    <p>{network.name}</p>
  );
}

useChainId

import {
  useChainId
} from "eth-react-provider";

const chainId = useChainId();

useAccount

Retrieve the connected wallet address.

import {
  useAccount
} from "eth-react-provider";

const account = useAccount();

Multiple Providers

Support multiple providers simultaneously.

<EthereumProvider
  providers={{
    ethereum,
    polygon,
    arbitrum
  }}
>
  <App />
</EthereumProvider>

Switch Provider

const { switchProvider } = useProvider();

switchProvider("polygon");

Switch Network

const { switchNetwork } = useProvider();

await switchNetwork(1);

Custom Provider

<EthereumProvider
  provider={customProvider}
>
  <App />
</EthereumProvider>

Supported Providers

Compatible with:

• ethers.js JsonRpcProvider
• ethers.js BrowserProvider
• viem Public Client
• viem Wallet Client
• web3.js Provider
• MetaMask
• WalletConnect
• Coinbase Wallet
• Infura
• Alchemy
• QuickNode
• Chainstack
• Ankr
• Custom JSON-RPC providers

Supported Networks

• Ethereum
• Polygon
• Arbitrum
• Optimism
• Base
• BNB Smart Chain
• Avalanche
• Fantom
• Linea
• Scroll
• zkSync Era
• Moonbeam
• Gnosis
• Any EVM-compatible blockchain

API

EthereumProvider

<EthereumProvider
  provider={provider}
>
  {children}
</EthereumProvider>

Props

| Property | Type | Description | |----------|------|-------------| | provider | Provider | Active Web3 provider | | providers | object | Multiple providers | | autoConnect | boolean | Automatically reconnect wallet | | children | ReactNode | React components |

Hooks

useProvider()

Returns

Provider

useSigner()

Returns

Signer

useAccount()

Returns

string

useNetwork()

Returns

Network

useChainId()

Returns

number

TypeScript

Fully typed.

import {
  EthereumProvider,
  ProviderContext,
  useProvider
} from "eth-react-provider";

Examples

Display Current Account

function Wallet() {
  const account = useAccount();

  return <p>{account}</p>;
}

Display Current Network

function Network() {
  const network = useNetwork();

  return (
    <h1>{network.name}</h1>
  );
}

Read Blockchain Data

function BlockNumber() {
  const provider = useProvider();

  const load = async () => {
    const block = await provider.getBlockNumber();

    console.log(block);
  };
}

Switch Chains

const { switchNetwork } = useProvider();

await switchNetwork(8453);

Browser Support

Supports all modern browsers.

• Chrome
• Firefox
• Safari
• Edge
• Brave
• Opera

Best Practices

• Wrap your application once with EthereumProvider.
• Use hooks instead of prop drilling.
• Keep a single provider instance whenever possible.
• Handle provider errors gracefully.
• Reconnect wallets automatically for a better user experience.

Roadmap

• Multi-wallet management
• WalletConnect v2 enhancements
• Provider fallback support
• Automatic RPC failover
• ENS integration
• Event subscriptions
• Transaction tracking
• React Server Components support
• Suspense integration
• SSR support

Contributing

Contributions are welcome!

1. Fork the repository.
2. Create a feature branch.
3. Add tests for new functionality.
4. Submit a pull request.

Please open an issue before proposing significant changes.

License

MIT

Motivation

Managing Ethereum providers across a React application often involves repetitive setup and boilerplate code. eth-react-provider centralizes provider management using React Context and hooks, making it easy to access providers, signers, accounts, and network information throughout your application while remaining compatible with the most popular Web3 libraries and EVM-compatible blockchains.