The React CSV generator
Let's generate a CSV file on the frontend side. Efficiently and quickly with TypeScript support.
- Customize your source of data
- Use default styles or customize it
- Use custom labels for data fields
- Generated file works well with Excel and Numbers
- ✨Magic ✨
``sh`
npm install @exlabs/react-csv-generator
or
`sh`
yarn add @exlabs/react-csv-generator
| Prop | Required | Description | Example
| ------ | ------ | ------ | ------ |
| children | ✅ | Content of the component| "Download" or
| | ✅ | Name of the generated file | "generated-file"
| className | ⬜️| Class name to custom CSS styling| "own-class"
| baseEndpoint | ⬜️ ✅ | URL of the endpoint. If set, you can't set items | "https://api.punkapi.com/v2/beers"
| endpointDetails | ⬜️ | Additional params for the endpoint set in baseEndpoint | { page: 1, per_page: 3 }
| | ⬜️ ✅ | Array of data ready to generate the CSV. If set, you can't set baseEndpoint | [ { id: 1 }, { id: 2 } ]
| | ⬜️ | Custom labels for fields | { name: 'User name', created_at: 'Created at' }
| | ⬜️ | If endpoint will return data in some particular object, pass its name | "items"
| loader | ⬜️ | Component to replace the default loader |
| | ⬜️ | Message if something goes wrong. Default value: Something went wrong, please try again. | "Oppps, sorry!"
| noDataMessage | ⬜️ | Message if there is no data to generate the CSV file. Default value: No data to generate the file. | "Your data object is empty!"Usage & Examples
$3
`javascript
import React from 'react';
import CsvGenerator from '@exlabs/react-csv-generator';const data = [{ id: 1, name: 'first' }, { id: 2, name: 'second' }];
const MyComponent = () => {
return (
Hello!
Download!
);
};export default MyComponent;
`$3
javascript
import React from 'react';
import CsvGenerator from '@exlabs/react-csv-generator';const MyComponent = () => {
return (
Hello!
baseEndpoint="https://api.punkapi.com/v2/beers"
>
Download!
);
};export default MyComponent;
`$3
javascript
import React from 'react';
import CsvGenerator from '@exlabs/react-csv-generator';const MyComponent = () => {
return (
Hello!
baseEndpoint="https://api.punkapi.com/v2/beers"
endpointDetails={{ page: 3, per_page: 10 }}
>
Download!
);
};export default MyComponent;
`$3
javascript
{
items: [{...}],
total_pages: 3,
}
`The component will fetch
then https://api...?page=2 and finally https://api...?page=3. Only one CSV file will be generated with data from all pages. There is a big chance that your pagination endpoint works this way. Don't forget to pass objectNameInResponse prop. In the above example, it will be items.$3
`javascript
import React from 'react';
import CsvGenerator from '@exlabs/react-csv-generator';const MyComponent = () => {
return (
Hello!
baseEndpoint="https://api.punkapi.com/v2/beers"
endpointDetails={{ page: 3, per_page: 10 }}
labels={{ boil_volume: 'Boil Volume', mash_temp: 'Mash Temperature' }}
>
Download!
);
};export default MyComponent;
`
Demo
Coming soonAutomation tests
For easier writing tests, we add attribute to the component's button. For example, if you are using Cypress.io you can easily get this item by cy.get('[data-cy="csv-generator-btn"]')Excel support
Opening generated CSV file in the newest Excel may be tricky. React CSV Generator uses commas as a separator so Excel needs to know about it.
1. Open Excel
2. Select new blank workbook
3. Click and Open
4. Select a generated CSV file
5. In popup window select option and click Next
6. Set as a delimiter and click Next
7. Click