{"_id":"eth-react-provider","name":"eth-react-provider","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"eth-react-provider","version":"1.0.0","description":"eth-react-provider is a lightweight, TypeScript-first React library for managing Web3 providers in Ethereum and EVM-compatible applications. It offers React Context, hooks, and provider components for seamless integration with wallets, RPC providers, and ","repository":"","license":"LGPL-3.0","engines":{"node":">=8.0.0"},"types":"types/index.d.ts","scripts":{"compile":"tsc -b tsconfig.json","dtslint":"dtslint --localTs ../../node_modules/typescript/lib types"},"main":"lib/index.js","dependencies":{"axios":"^1.18.1","eventemitter3":"4.0.4","web3-core-helpers":"1.10.3"},"devDependencies":{"dtslint":"^3.4.1","typescript":"4.9.5"},"gitHead":"24d310caa06af88cb1fe236b7d3b9d135f053d71","_id":"eth-react-provider@1.0.0","_nodeVersion":"24.18.0","_npmVersion":"11.18.0","dist":{"integrity":"sha512-EItjOF5tvXI5P6dVh/mfTOG6GKE42M0aYp3DMndl8PaOitbqeaq45cwBHdJ63TdEVoky5Zq0TB3KVIKGAZ1fCg==","shasum":"fe0aa0870dcfce8d5e8fb920191bc973ee558a88","tarball":"https://registry.npmjs.org/eth-react-provider/-/eth-react-provider-1.0.0.tgz","fileCount":12,"unpackedSize":147635,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCiQrlW+X0lIPVik9NcZjEPD0tnz+mJHn74D3nROynAVgIhAOwuoXerDyl3cvJlgrPMJDY3PscZ8W6UunhbLtJqHnB5"}]},"_npmUser":{"name":"ellisarianasyr585","email":"ellisarianasyr585@hotmail.com"},"directories":{},"maintainers":[{"name":"ellisarianasyr585","email":"ellisarianasyr585@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/eth-react-provider_1.0.0_1785606591780_0.29088080602382327"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-01T17:49:51.706Z","1.0.0":"2026-08-01T17:49:51.941Z","modified":"2026-08-01T17:49:52.191Z"},"maintainers":[{"name":"ellisarianasyr585","email":"ellisarianasyr585@hotmail.com"}],"description":"eth-react-provider is a lightweight, TypeScript-first React library for managing Web3 providers in Ethereum and EVM-compatible applications. It offers React Context, hooks, and provider components for seamless integration with wallets, RPC providers, and ","license":"LGPL-3.0","readme":"# eth-react-provider\n\nA lightweight, TypeScript-first React library for managing **Ethereum providers, wallet connections, and Web3 context** in React applications.\n\n`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.\n\n```tsx\nimport {\n  EthereumProvider,\n  useProvider\n} from \"eth-react-provider\";\n\nfunction App() {\n  return (\n    <EthereumProvider provider={provider}>\n      <Dashboard />\n    </EthereumProvider>\n  );\n}\n```\n\n---\n\n# Features ⚡\n\n- React Context for Ethereum providers\n- Provider management\n- Wallet provider support\n- RPC provider support\n- Multiple provider support\n- Provider switching\n- Network switching\n- Custom provider injection\n- React Hooks API\n- TypeScript-first\n- Works with ethers.js\n- Works with viem\n- Works with web3.js\n- Supports all EVM chains\n- Lightweight and tree-shakable\n\n---\n\n# Installation\n\n```bash\nnpm install eth-react-provider\n```\n\nor\n\n```bash\nyarn add eth-react-provider\n```\n\n---\n\n# Getting Started\n\nWrap your application with `EthereumProvider`.\n\n```tsx\nimport {\n  EthereumProvider\n} from \"eth-react-provider\";\n\n<EthereumProvider provider={provider}>\n  <App />\n</EthereumProvider>\n```\n\n---\n\n# useProvider\n\nAccess the active provider anywhere in your application.\n\n```tsx\nimport {\n  useProvider\n} from \"eth-react-provider\";\n\nfunction Home() {\n  const provider = useProvider();\n\n  return (\n    <div>\n      Connected\n    </div>\n  );\n}\n```\n\n---\n\n# useSigner\n\nAccess the connected wallet signer.\n\n```tsx\nimport {\n  useSigner\n} from \"eth-react-provider\";\n\nfunction Wallet() {\n  const signer = useSigner();\n\n  async function sign() {\n    const address = await signer.getAddress();\n\n    console.log(address);\n  }\n}\n```\n\n---\n\n# useNetwork\n\nRetrieve the active blockchain network.\n\n```tsx\nimport {\n  useNetwork\n} from \"eth-react-provider\";\n\nfunction NetworkInfo() {\n  const network = useNetwork();\n\n  return (\n    <p>{network.name}</p>\n  );\n}\n```\n\n---\n\n# useChainId\n\n```tsx\nimport {\n  useChainId\n} from \"eth-react-provider\";\n\nconst chainId = useChainId();\n```\n\n---\n\n# useAccount\n\nRetrieve the connected wallet address.\n\n```tsx\nimport {\n  useAccount\n} from \"eth-react-provider\";\n\nconst account = useAccount();\n```\n\n---\n\n# Multiple Providers\n\nSupport multiple providers simultaneously.\n\n```tsx\n<EthereumProvider\n  providers={{\n    ethereum,\n    polygon,\n    arbitrum\n  }}\n>\n  <App />\n</EthereumProvider>\n```\n\n---\n\n# Switch Provider\n\n```tsx\nconst { switchProvider } = useProvider();\n\nswitchProvider(\"polygon\");\n```\n\n---\n\n# Switch Network\n\n```tsx\nconst { switchNetwork } = useProvider();\n\nawait switchNetwork(1);\n```\n\n---\n\n# Custom Provider\n\n```tsx\n<EthereumProvider\n  provider={customProvider}\n>\n  <App />\n</EthereumProvider>\n```\n\n---\n\n# Supported Providers\n\nCompatible with:\n\n- ethers.js JsonRpcProvider\n- ethers.js BrowserProvider\n- viem Public Client\n- viem Wallet Client\n- web3.js Provider\n- MetaMask\n- WalletConnect\n- Coinbase Wallet\n- Infura\n- Alchemy\n- QuickNode\n- Chainstack\n- Ankr\n- Custom JSON-RPC providers\n\n---\n\n# Supported Networks\n\n- Ethereum\n- Polygon\n- Arbitrum\n- Optimism\n- Base\n- BNB Smart Chain\n- Avalanche\n- Fantom\n- Linea\n- Scroll\n- zkSync Era\n- Moonbeam\n- Gnosis\n- Any EVM-compatible blockchain\n\n---\n\n# API\n\n## EthereumProvider\n\n```tsx\n<EthereumProvider\n  provider={provider}\n>\n  {children}\n</EthereumProvider>\n```\n\n### Props\n\n| Property | Type | Description |\n|----------|------|-------------|\n| provider | Provider | Active Web3 provider |\n| providers | object | Multiple providers |\n| autoConnect | boolean | Automatically reconnect wallet |\n| children | ReactNode | React components |\n\n---\n\n## Hooks\n\n### useProvider()\n\nReturns\n\n```tsx\nProvider\n```\n\n---\n\n### useSigner()\n\nReturns\n\n```tsx\nSigner\n```\n\n---\n\n### useAccount()\n\nReturns\n\n```tsx\nstring\n```\n\n---\n\n### useNetwork()\n\nReturns\n\n```tsx\nNetwork\n```\n\n---\n\n### useChainId()\n\nReturns\n\n```tsx\nnumber\n```\n\n---\n\n# TypeScript\n\nFully typed.\n\n```tsx\nimport {\n  EthereumProvider,\n  ProviderContext,\n  useProvider\n} from \"eth-react-provider\";\n```\n\n---\n\n# Examples\n\n## Display Current Account\n\n```tsx\nfunction Wallet() {\n  const account = useAccount();\n\n  return <p>{account}</p>;\n}\n```\n\n---\n\n## Display Current Network\n\n```tsx\nfunction Network() {\n  const network = useNetwork();\n\n  return (\n    <h1>{network.name}</h1>\n  );\n}\n```\n\n---\n\n## Read Blockchain Data\n\n```tsx\nfunction BlockNumber() {\n  const provider = useProvider();\n\n  const load = async () => {\n    const block = await provider.getBlockNumber();\n\n    console.log(block);\n  };\n}\n```\n\n---\n\n## Switch Chains\n\n```tsx\nconst { switchNetwork } = useProvider();\n\nawait switchNetwork(8453);\n```\n\n---\n\n# Browser Support\n\nSupports all modern browsers.\n\n- Chrome\n- Firefox\n- Safari\n- Edge\n- Brave\n- Opera\n\n---\n\n# Best Practices\n\n- Wrap your application once with `EthereumProvider`.\n- Use hooks instead of prop drilling.\n- Keep a single provider instance whenever possible.\n- Handle provider errors gracefully.\n- Reconnect wallets automatically for a better user experience.\n\n---\n\n# Roadmap\n\n- Multi-wallet management\n- WalletConnect v2 enhancements\n- Provider fallback support\n- Automatic RPC failover\n- ENS integration\n- Event subscriptions\n- Transaction tracking\n- React Server Components support\n- Suspense integration\n- SSR support\n\n---\n\n# Contributing\n\nContributions are welcome!\n\n1. Fork the repository.\n2. Create a feature branch.\n3. Add tests for new functionality.\n4. Submit a pull request.\n\nPlease open an issue before proposing significant changes.\n\n---\n\n# License\n\nMIT\n\n---\n\n# Motivation\n\nManaging 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.","readmeFilename":"README.md","_rev":"1-c4430963dfd2fafb77b36158952ff1b1"}