Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

react-xls is the fastest in-browser excel ( .xls & .xlsx ) parser for React. It is full of useful features such as useExcelDownloader, ... etc.
https://github.com/bunlong/react-xls

excel react react-excel-downloader reactjs spreadsheet xls xlsb xlsm xlsx

Last synced: 19 days ago
JSON representation

react-xls is the fastest in-browser excel ( .xls & .xlsx ) parser for React. It is full of useful features such as useExcelDownloader, ... etc.

Host: GitHub
URL: https://github.com/bunlong/react-xls
Owner: Bunlong
License: mit
Created: 2021-08-13T17:19:33.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2023-01-27T08:30:31.000Z (almost 2 years ago)
Last Synced: 2024-12-23T13:48:27.244Z (about 1 month ago)
Topics: excel, react, react-excel-downloader, reactjs, spreadsheet, xls, xlsb, xlsm, xlsx
Language: JavaScript
Homepage:
Size: 241 KB
Stars: 23
Watchers: 3
Forks: 3
Open Issues: 4
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        # react-xls

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

[![NPM](https://img.shields.io/npm/v/react-xls.svg)](https://www.npmjs.com/package/react-xls) ![npm bundle size](https://img.shields.io/bundlephobia/min/react-xls) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## 🎁 Features

* Compatible with both JavaScript and TypeScript

## 📚 Useful Features

* [useExcelDownloader](https://github.com/bunlong/react-xls#-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

```js

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 (

    


      

        Download

      

    

  );

}

export default App;

```

#### 👨‍💻 Link

```js

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 (

    


      

        Download

      

    

  );

}

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 | ❌ |

## 📜 Changelog

Latest version 0.1.0 (2021-08-15):

  * Add useExcelDownloader

Details changes for each release are documented in the [CHANGELOG.md](https://github.com/Bunlong/react-xls/blob/master/CHANGELOG.md).

## ❗ Issues

If you think any of the `react-xls` can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.

## 💪 Contribution

We'd love to have your helping hand on contributions to `react-xls` by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

How to contribute:

- Open pull request with improvements

- Discuss ideas in issues

- Spread the word

- Reach out with any feedback

## 🏆 Contributors

  

    

      

        

        


        _Bunlong

      

    

  

## ⚖️ License

The MIT License [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)