Practical overview
When it fits
Use it when a React Ethereum dApp needs a shared MetaMask connection and state interface across components.
Who it is for
React developers building Ethereum dApps that need MetaMask connection and wallet-state handling.
Documented uses
- Connect a React app to MetaMask through a reusable hook.
- Read connected accounts, current chain details, extension availability and connection status.
- Check existing account access or retrieve chain information without initiating a connection.
Requirements & limits
The repository is public and identifies the project as MIT-licensed. The README documents npm and Yarn installation options.
- The library is specifically a React Hook for MetaMask, rather than a standalone wallet or full dApp.
- The app supplies a Web3 interface when calling connect; the README examples mention Web3 and ethers.
- The exposed state includes accounts, chain ID and name, extension availability, connection status and the provided Web3 instance.
Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.
Add the hook and provider to a React app
Install useMetamask, build it locally if needed, and connect a React app to MetaMask through the documented provider and hook.
Before you start
- A React application.
- For a local build, npm greater than 12.13.0; Yarn is optional.
- MetaMask in the user's browser for the extension-availability and wallet-connection parts of the example.
- A Web3 interface to pass to connect; the README examples mention Web3 and ethers.
Steps
Install the package with npm i use-metamask or yarn add use-metamask. Alternatively, clone the repository, install dependencies with npm install or yarn, run npm run build or yarn build, and prepare the package with npm pack.
Wrap the app in MetamaskStateProvider.
Import useMetamask in a component and call connect with the chosen Web3 interface.
Read account, chain, availability, connection and Web3 interface information from metaState; use getAccounts to check existing access or getChain to retrieve chain details without calling connect.
Expected outcome
A React component can use the hook's MetaMask connection and state interface to display account and chain information.
Guide limitations
- The README describes account and chain state handling; it does not document a complete dApp or transaction workflow.
- The example requires the app to provide a Web3 interface to connect.
Sources & review
Source record details
- Source availability
- Active
- Sources checked
- 16 October 2026
- Original website title
- mdtanrikulu/use-metamask · Official homepage title · retained in its source language