React component for excel sheet uploading, editing and data transformation to an array of objects
npm install @ramonak/react-excel> React component to upload, edit and transform data of excel sheet into an array of objects
 !npm bundle size!GitHub!npm
!demo
``bash`
npm install --save @ramonak/react-excel
`jsx
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 (
<>
accept='.xlsx'
onChange={handleUpload}
/>
onSheetUpdate={(currentSheet) => setCurrentSheet(currentSheet)}
activeSheetClassName='active-sheet'
reactExcelClassName='react-excel'
/>
);
}
`
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:
`bash``
[
{
id: 1,
name: "John",
age: 25
},
{
id: 2,
name: "Mary",
age: 31
},
{
id: 3,
name: "Ann",
age: 23
}
]
| 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 |
- takes uploaded excel file as a parameter (required) and returns object with readed excel file data. Uses SheetJS library.
- takes the current excel sheet object and generates array of objects.
MIT © KaterinaLupacheva