How to connect ReactJS with MetaMask ?

Last Updated : 12 Apr, 2025

To Connect React JS with MetaMask is important while making Web 3 applications, It will be done with Meta mask wallet which is the most used browser tool for sending and receiving signed transactions .

MetaMask is a crypto wallet and a gateway to blockchain DAPP. It is used to connect our app to web3. It is just a Chrome extension that is used to access and interact with the Ethereum blockchain. Its features support tokens and digital assets in the Ethereum ecosystem. It is also used as a primary wallet to store the balance in Ethereum.

For connection, we are using ethers.js, in order to connect to the Ethereum wallet.

Approach to connect React JS with MetaMask

We will connect MetaMask to React using Ether library which can be used to initialize the authentication using MetaMask wallet browser extention. Then a request will be made to acces the account info e.g. current balance, last transections etc.

Steps to create React Application

Step 1: Creating a react project with CLI

npx create-react-app eth_app

Step 2: Move to the project directory

cd eth_app

Step 3: Install these packages to run the application

npm i react-bootstrap bootstrap [email protected]

Project Structure:

The updated dependencies in package.json file will look like:

{
    "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "bootstrap": "^5.3.2",
        "ethers": "^5.7.2",
        "react": "^18.2.0",
        "react-bootstrap": "^2.9.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    }
}

Example: Initiallize metamask authentication usign browser extention when clicked on Connet button.

JavaScript

// Filename - App.js // Importing modules import React, { useState } from "react"; import { ethers } from "ethers"; import "./App.css"; import { Button, Card } from "react-bootstrap"; import "bootstrap/dist/css/bootstrap.min.css";  function App() {     // usetstate for storing and retrieving wallet details     const [data, setdata] = useState({         address: "",         Balance: null,     });      // Button handler button for handling a     // request event for metamask     const btnhandler = () => {         // Asking if metamask is already present or not         if (window.ethereum) {             // res[0] for fetching a first wallet             window.ethereum                 .request({ method: "eth_requestAccounts" })                 .then((res) =>                     accountChangeHandler(res[0])                 );         } else {             alert("install metamask extension!!");         }     };      // getbalance function for getting a balance in     // a right format with help of ethers     const getbalance = (address) => {         // Requesting balance method         window.ethereum             .request({                 method: "eth_getBalance",                 params: [address, "latest"],             })             .then((balance) => {                 // Setting balance                 setdata({                     Balance:                         ethers.utils.formatEther(balance),                 });             });     };      // Function for getting handling all events     const accountChangeHandler = (account) => {         // Setting an address data         setdata({             address: account,         });          // Setting a balance         getbalance(account);     };      return (         <div className="App">             {/* Calling all values which we         have stored in usestate */}              <Card className="text-center">                 <Card.Header>                     <strong>Address: </strong>                     {data.address}                 </Card.Header>                 <Card.Body>                     <Card.Text>                         <strong>Balance: </strong>                         {data.Balance}                     </Card.Text>                     <Button                         onClick={btnhandler}                         variant="primary"                     >                         Connect to wallet                     </Button>                 </Card.Body>             </Card>         </div>     ); }  export default App;