- Notifications
You must be signed in to change notification settings - Fork1
Let's generate a CSV file on the frontend side. Efficiently and quickly with TypeScript support
License
Exlabs/react-csv-generator
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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 ✨
- Generate a CSV file from the array
- Generate a CSV file from one endpoint
- Generate a CSV file from a bunch of endpoint's pages (pagination support)
- Default loader during file generation (can be replaced)
- Custom, optional fields labels
- Custom filename
- Custom messages
- TypeScript support
npm install @exlabs/react-csv-generator
or
yarn add @exlabs/react-csv-generator
| Prop | Required | Description | Example |
|---|---|---|---|
children | ✅ | Content of the component | "Download" or<div>Download me</div> |
fileName | ✅ | 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 setitems | "https://api.punkapi.com/v2/beers" |
endpointDetails | ⬜️ | Additional params for the endpoint set inbaseEndpoint | { page: 1, per_page: 3 } |
items | ⬜️ ✅ | Array of data ready to generate the CSV. If set, you can't setbaseEndpoint | [ { id: 1 }, { id: 2 } ] |
labels | ⬜️ | Custom labels for fields | { name: 'User name', created_at: 'Created at' } |
objectNameInResponse | ⬜️ | If endpoint will return data in some particular object, pass its name | "items" |
loader | ⬜️ | Component to replace the default loader | <MyOwnLoader /> |
errorMessage | ⬜️ | 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!" |
importReactfrom'react';importCsvGeneratorfrom'@exlabs/react-csv-generator';constdata=[{id:1,name:'first'},{id:2,name:'second'}];constMyComponent=()=>{return(<div><h1>Hello!</h1><CsvGeneratorfileName="my-name"items={data}> Download!</CsvGenerator></div>);};exportdefaultMyComponent;
importReactfrom'react';importCsvGeneratorfrom'@exlabs/react-csv-generator';constMyComponent=()=>{return(<div><h1>Hello!</h1><CsvGeneratorfileName="my-name"baseEndpoint="https://api.punkapi.com/v2/beers"> Download!</CsvGenerator></div>);};exportdefaultMyComponent;
importReactfrom'react';importCsvGeneratorfrom'@exlabs/react-csv-generator';constMyComponent=()=>{return(<div><h1>Hello!</h1><CsvGeneratorfileName="my-name"baseEndpoint="https://api.punkapi.com/v2/beers"endpointDetails={{page:3,per_page:10}}> Download!</CsvGenerator></div>);};exportdefaultMyComponent;
If your endpoint will returntotal_pages the component will try to fetch data from all pages and then generate the CSV. An example of the returned object might look like this:
{items:[{...}],total_pages:3,}
The component will fetchhttps://api...?page=1 thenhttps://api...?page=2 and finallyhttps://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 passobjectNameInResponse prop. In the above example, it will beitems.
importReactfrom'react';importCsvGeneratorfrom'@exlabs/react-csv-generator';constMyComponent=()=>{return(<div><h1>Hello!</h1><CsvGeneratorfileName="my-name"baseEndpoint="https://api.punkapi.com/v2/beers"endpointDetails={{page:3,per_page:10}}labels={{boil_volume:'Boil Volume',mash_temp:'Mash Temperature'}}> Download!</CsvGenerator></div>);};exportdefaultMyComponent;
Coming soon
For easier writing tests, we adddata-cy="csv-generator-btn" attribute to the component's button. For example, if you are using Cypress.io you can easily get this item bycy.get('[data-cy="csv-generator-btn"]')
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.
- Open Excel
- Select new blank workbook
- Click
FileandOpen - Select a generated CSV file
- In popup window select
Delimitedoption and clickNext - Set
commaas a delimiter and clickNext - Click
Finishand enjoy 🎉
MIT
About
Let's generate a CSV file on the frontend side. Efficiently and quickly with TypeScript support
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.