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 ✨

Features

• 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

Installation

npm install @exlabs/react-csv-generator

or

yarn add @exlabs/react-csv-generator

Available Props

| 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 set items | "https://api.punkapi.com/v2/beers" | endpointDetails | ⬜️ | Additional params for the endpoint set in baseEndpoint | { page: 1, per_page: 3 } | items | ⬜️ ✅ | Array of data ready to generate the CSV. If set, you can't set baseEndpoint | [ { 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!"

Usage & Examples

Render it inside your React application:

import React from 'react';
import CsvGenerator from '@exlabs/react-csv-generator';

const data = [{ id: 1, name: 'first' }, { id: 2, name: 'second' }];

const MyComponent = () => {
  return (
    <div>
      <h1>Hello!</h1>
      <CsvGenerator fileName="my-name" items={data}>
        Download!
      </CsvGenerator>
    </div>
  );
};

export default MyComponent;

Get data from the endpoint:

import React from 'react';
import CsvGenerator from '@exlabs/react-csv-generator';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello!</h1>
      <CsvGenerator
        fileName="my-name"
        baseEndpoint="https://api.punkapi.com/v2/beers"
      >
        Download!
      </CsvGenerator>
    </div>
  );
};

export default MyComponent;

Get data from the endpoint with specific details:

import React from 'react';
import CsvGenerator from '@exlabs/react-csv-generator';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello!</h1>
      <CsvGenerator
        fileName="my-name"
        baseEndpoint="https://api.punkapi.com/v2/beers"
        endpointDetails={{ page: 3, per_page: 10 }}
      >
        Download!
      </CsvGenerator>
    </div>
  );
};

export default MyComponent;

If your endpoint will return total_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 fetch https://api...?page=1 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.

Generate file with custom labels:

import React from 'react';
import CsvGenerator from '@exlabs/react-csv-generator';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello!</h1>
      <CsvGenerator
        fileName="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>
  );
};

export default MyComponent;

Demo

Coming soon

Automation tests

For easier writing tests, we add data-cy="csv-generator-btn" 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 File and Open
4. Select a generated CSV file
5. In popup window select Delimited option and click Next
6. Set comma as a delimiter and click Next
7. Click Finish and enjoy 🎉

License

MIT