react-xls
react-xls copied to clipboard
Bunlong
react-xls is the fastest in-browser excel ( .xls & .xlsx ) parser for React. It is full of useful features such as useExcelDownloader, ... etc.
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 | ❌ |
📜 Changelog
Latest version 0.1.0 (2021-08-15):
- Add useExcelDownloader
Details changes for each release are documented in the 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 
Bunlong