How to import data from Excel “XLSX” in React.js (2024)

Table of Contents

Step 1: Create a New React.js Application Step 2: Install the xlsx Library Step 3: Create a File Input Component Step 4: Update App Component Step 5: Run the Application

Muhammad Usman Umar

Step 1: Create a New React.js Application

If you haven’t already created a React.js application, you can create a new one using Create React App:

npx create-react-app react-xlsx-import

Step 2: Install the `xlsx` Library

Navigate to your project directory and install the xlsx library:

cd react-xlsx-import
npm install xlsx

Step 3: Create a File Input Component

Create a new file called FileInput.js in the src directory and add the following code to create a file input component:

// src/FileInput.jsimport React from 'react';
import * as XLSX from 'xlsx';
function FileInput() {
 const [data, setData] = React.useState(null);
 const handleFileUpload = (e) => {
 const file = e.target.files[0];
 const reader = new FileReader();
 reader.onload = (event) => {
 const workbook = XLSX.read(event.target.result, { type: 'binary' });
 const sheetName = workbook.SheetNames[0];
 const sheet = workbook.Sheets[sheetName];
 const sheetData = XLSX.utils.sheet_to_json(sheet);
 setData(sheetData);
 };
 reader.readAsBinaryString(file);
 };
 return (
 <div>
 <input type="file" onChange={handleFileUpload} />
 {data && (
 <div>
 <h2>Imported Data:</h2>
 <pre>{JSON.stringify(data, null, 2)}</pre>
 </div>
 )}
 </div>
 );
}
export default FileInput;

Step 4: Update App Component

Update the App.js file in the src directory to include the FileInput component:

// src/App.jsimport React from 'react';
import './App.css';
import FileInput from './FileInput';
function App() {
 return (
 <div className="App">
 <h1>Import Excel Data in React.js</h1>
 <FileInput />
 </div>
 );
}
export default App;

Step 5: Run the Application

Run the React.js application using the following command:

npm start

Open your web browser and navigate to http://localhost:3000. You should see a file input component that allows you to upload an .xlsx file. After selecting an .xlsx file, the imported data will be displayed below the file input.

You have successfully imported data from an .xlsx file in a React.js application using the xlsx library. You can now extend this example to process the imported data and display it in a more structured and user-friendly manner, such as displaying it in a table or performing additional data manipulation and analysis.

Remember to handle errors and edge cases appropriately, such as checking the file type before processing, handling large files efficiently, and providing feedback to the user during the file upload and data processing steps.