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;