@ramonak/react-excel

React component to upload, edit and transform data of excel sheet into an array of objects

Demo

Install

npm install --save @ramonak/react-excel

Usage

import { ReactExcel, readFile, generateObjects } from '@ramonak/react-excel';

const App = () => {
  const [initialData, setInitialData] = useState(undefined);
  const [currentSheet, setCurrentSheet] = useState({});

  const handleUpload = (event) => {
    const file = event.target.files[0];
    //read excel file
    readFile(file)
      .then((readedData) => setInitialData(readedData))
      .catch((error) => console.error(error));
  };

  const save = () => {
    const result = generateObjects(currentSheet);
    //save array of objects to backend
  };

  return (
    <>
      <input
        type='file'
        accept='.xlsx'
        onChange={handleUpload}
      />
      <ReactExcel
        initialData={initialData}
        onSheetUpdate={(currentSheet) => setCurrentSheet(currentSheet)}
        activeSheetClassName='active-sheet'
        reactExcelClassName='react-excel'
      />
      <button onClick={save}>
          Save to API
      </button>
    </>
  );
}

Description

The library consists of 3 parts:

1. readFile function - reads excel file with the use of SheetJS library.
2. ReactExcel component - a custom React.js component for rendering and editing an excel sheet on the screen.
3. generateObjects function - generates an array of objects from excel sheet data using the following template:

excel sheet data:

id	name	age
1	John	25
2	Mary	31
3	Ann	23

will be transformed into:

[
  {
    id: 1,
    name: "John",
    age: 25
  },
  {
    id: 2,
    name: "Mary",
    age: 31
  },
  {
    id: 3,
    name: "Ann",
    age: 23
  }
]

Props

ReactExcel component

Name	Type	Description
initialData	object	readed from excel file data
onSheetUpdate	func	keeps track of current sheet and its updated data
activeSheetClassName	string	class name for an active sheet button styles
reactExcelClassName	string	class name for an ReactExcel component styles

readFile function

• takes uploaded excel file as a parameter (required) and returns object with readed excel file data. Uses SheetJS library.

generateObjects function

• takes the current excel sheet object and generates array of objects.

License

MIT © KaterinaLupacheva