Neutralize Pesky Miscreants

    @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

    63

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    269 kB

    Total Files

    8

    Last publish

    Collaborators

    • ramonak