The fastest in-browser excel ( .xls & .xlsx ) parser for React

react-xls

react-xls is the fastest in-browser excel ( .xls & .xlsx ) parser for React.

? Features

• Compatible with both JavaScript and TypeScript

? Useful Features

• useExcelDownloader – React hook that render the link/button which is clicked to download the data provided in excel file.

? Install

react-xls is available on npm. It can be installed with the following command:

npm install react-xls --save

react-xls is available on yarn as well. It can be installed with the following command:

yarn add react-xls --save

? Usage

? useExcelDownloader

?‍? Button

import React from 'react';

import { useExcelDownloder } from 'react-xls';

function App() {
  const { ExcelDownloder, Type } = useExcelDownloder();

  // We will make a Workbook contains 2 Worksheets
  const data = {
    // Worksheet named animals
    animals: [
      { name: 'cat', category: 'animal' },
      { name: 'dog', category: 'animal' },
      { name: 'pig', category: 'animal' },
    ],
    // Worksheet named pokemons
    pokemons: [
      { name: 'pikachu', category: 'pokemon' },
      { name: 'Arbok', category: 'pokemon' },
      { name: 'Eevee', category: 'pokemon' },
    ],
  };

  return (
    <div>
      <ExcelDownloder
        data={data}
        filename={'book'}
        type={Type.Button} // or type={'button'}
      >
        Download
      </ExcelDownloder>
    </div>
  );
}

export default App;

?‍? Link

import React from 'react';

import { useExcelDownloder } from 'react-xls';

function App() {
  const { ExcelDownloder, Type } = useExcelDownloder();

  // We will make a Workbook contains 2 Worksheets
  const data = {
    // Worksheet named animals
    animals: [
      { name: 'cat', category: 'animal' },
      { name: 'dog', category: 'animal' },
      { name: 'pig', category: 'animal' },
    ],
    // Worksheet named pokemons
    pokemons: [
      { name: 'pikachu', category: 'pokemon' },
      { name: 'Arbok', category: 'pokemon' },
      { name: 'Eevee', category: 'pokemon' },
    ],
  };

  return (
    <div>
      <ExcelDownloder
        data={data}
        filename={'book'}
        type={Type.Link} // or type={'link'}
      >
        Download
      </ExcelDownloder>
    </div>
  );
}

export default App;

? useExcelDownloder Returned Object

Object Properties	Description
ExcelDownloder	React component that render the link/button which is clicked to download the data provided in excel file.
Type	Constant object ( Type.Line && Type.Button ).
setData	Method that use to set data.
setFilename	Method that use to set filename.
setStyle	Method that use to set style.
setClassName	Method that use to set className.

? ExcelDownloder props

Props	Type	Default	Description	Required
children	node		React component, HTML element or string.	✅
data	object		Downloaded data.	✅
filename	string		Filename ( .xlsx extension is automatically added ).	✅
type	string	'link'	If 'button', render button.	❌
style	object	{}	Inline style.	❌
className	string	''	className	❌

GitHub

https://github.com/Bunlong/react-xls