Skip to content

Let's generate a CSV file on the frontend side. Efficiently and quickly with TypeScript support

License

Notifications You must be signed in to change notification settings

Exlabs/react-csv-generator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React CSV Generator

Exlabs

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

About

Let's generate a CSV file on the frontend side. Efficiently and quickly with TypeScript support

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published