Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@ramonak/react-excel

1.0.1 • Public • Published

@ramonak/react-excel

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

NPM JavaScript Style Guidenpm bundle sizeGitHubnpm

Demo

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

License

MIT © KaterinaLupacheva

Install

npm i @ramonak/react-excel

DownloadsWeekly Downloads

33

Version

1.0.1

License

MIT

Unpacked Size

269 kB

Total Files

8

Last publish

Collaborators

  • avatar