Skip to content

KaterinaLupacheva/react-excel

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

@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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published