Excel File Uploader

A React component library for uploading and reading Excel files with support for single and multiple sheets.

Features

✅ Drag & drop file upload
✅ Support for .xlsx, .xls, and .csv files
✅ Multiple sheet support with tab navigation
✅ Display data in formatted table
✅ Export data to Excel
✅ Built with Vite

Installation

npm install excel-file-uploader

Usage

Basic Usage

import { ExcelReader } from 'excel-file-uploader';

function App() {
  return <ExcelReader />;
}

export default App;

With Hook

import { useExcelFile, ExcelUploader, SheetViewer } from 'excel-file-uploader';

function App() {
  const {
    file,
    sheetNames,
    activeSheet,
    loading,
    error,
    handleFileUpload,
    switchSheet,
    getCurrentSheetData,
    clearData
  } = useExcelFile();

  return (
    <div>
      <ExcelUploader onFileUpload={handleFileUpload} loading={loading} />
      
      {file && (
        <>
          <div>
            {sheetNames.map(sheet => (
              <button key={sheet} onClick={() => switchSheet(sheet)}>
                {sheet}
              </button>
            ))}
          </div>
          <SheetViewer data={getCurrentSheetData()} title={activeSheet} />
        </>
      )}
    </div>
  );
}

Utility Functions

import { parseExcelFile, exportToExcel } from 'excel-file-uploader';

// Parse Excel file
const result = await parseExcelFile(file);
console.log(result.sheetNames); // Array of sheet names
console.log(result.sheets); // Object with all sheets' data

// Export data to Excel
const data = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 28 }
];
exportToExcel(data, 'People', 'people.xlsx');

Components

ExcelReader

Complete reader component with uploader and sheet viewer.

ExcelUploader

Drag & drop uploader component.

Props:

• onFileUpload (function): Callback when file is uploaded
• loading (boolean): Loading state

SheetViewer

Table viewer for Excel data.

Props:

• data (array): Array of objects to display
• title (string): Sheet title

Hooks

useExcelFile

Hook for managing Excel file state.

Returns:

• file: Current uploaded file
• sheetNames: Array of sheet names
• sheets: Object with all sheets' data
• activeSheet: Currently active sheet
• loading: Loading state
• error: Error message
• handleFileUpload: Upload handler
• switchSheet: Switch sheet handler
• getCurrentSheetData: Get current sheet data
• clearData: Clear all data

License

MIT