@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