How To Read Excel File In React.js

In this article, we will learn how to read data from Excel file in React JS.


  • Have Created React app

Step 1 : Import the following package in your app to read Excel File.

npm install xlsx

Step 2 : Navigate to your component and add the below code:

import React from 'react'
import { useState } from 'react';
import { read, utils, writeFile } from 'xlsx';

const HomeComponents = () => {
    const [data, setdata] = useState([])

    const readfile = ($event) => {
        const files = $;
        if (files.length) {
            const file = files[0];
            const reader = new FileReader();
            reader.onload = (event) => {
                const wb = read(;
                const sheets = wb.SheetNames;

                if (sheets.length) {
                    const rows = utils.sheet_to_json(wb.Sheets[sheets[0]]);
    return (
        <div style={{ marginTop: '30px' }}>
            <input type='file' onChange={readfile} accept='.xlsx' />

            <table style={{ margin: '20px auto' }}>
                    <th>Employee Code</th>
                    <th>Contact No.</th>
           => {
                        return <tr>

export default HomeComponents

– Add the following CSS to your App.css for styling the table

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
th, td {
  background-color: #96D4D4;
  padding: 5px;

– Here I have attached a video for Reference

– Sample Excel File :

– Hope you learn how to read data from an excel file in React.js.

-If you have any doubt feel free to ask in the comment section.

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories