1.0.1 • Published 5 years ago

@ramonak/react-excel v1.0.1

Weekly downloads
61
License
MIT
Repository
github
Last release
5 years ago

@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:

idnameage
1John25
2Mary31
3Ann23

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

NameTypeDescription
initialDataobjectreaded from excel file data
onSheetUpdatefunckeeps track of current sheet and its updated data
activeSheetClassNamestringclass name for an active sheet button styles
reactExcelClassNamestringclass 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

1.0.1

5 years ago

1.0.0

5 years ago

0.0.5

5 years ago

0.0.6

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago