Overview :

Generate CSV document according to given data.

This data can be array of arrays , or array of literal objects or string which is the CSV content.

Example :

import {CSVLink, CSVDownload} from 'react-csv';


const csvData =[
  ['firstname', 'lastname', 'email'] ,
  ['Ahmed', 'Tomi' , '[email protected]'] ,
  ['Raed', 'Labes' , '[email protected]'] ,
  ['Yezzi','Min l3b', '[email protected]']
];
<CSVLink data={csvData} >Download me</CSVLink>
// or
<CSVDownload data={csvData} target="_blank" />

And many examples are here 👈🏼

Install

npm install react-csv --save;

or , for non-node developers , you can use CDN directly :

<script src="https://cdn.rawgit.com/abdennour/react-csv/6424b500/cdn/react-csv-latest.min.js" type="text/javascript"></script>

Components:

This package includes actually two components: CSVLink and CSVDownload.

0. Common Props:

The two components accepts the following Props:

- data Props:

a required property that represents the CSV data. This data can be array of arrays, array of literal objects or string.

.i.e (array of arrays)

//array of arrays : each item is rendered as csv line
data = [
  ['firstname', 'lastname', 'email'] ,
  ['Ahmed', 'Tomi' , '[email protected]'] ,
  ['Raed', 'Labes' , '[email protected]'] ,
  ['Yezzi','Min l3b', '[email protected]']
];

.i.e (array of literal objects)

//array of literal objects : each item is rendered as csv line however the order of fields will be defined by headers props .If headers props is not defined , the component will generate headers from all data items.
data = [
  {firstname: 'Ahmed', lastname: 'Tomi' , email: '[email protected]'},
  {firstname:'Raed', lastname:'Labes' , email:'[email protected]'} ,
  {firstname:'Yezzi', lastname:'Min l3b', email:'[email protected]'}
];

.i.e (string)

//if the data is string , this means the csv content is already generated by developer/3rd party package.

data =`firstname,lastname
Ahmed,Tomi
Raed,Labes
Yezzi,Min l3b
`;
// or using 3rd party package
import json2csv from 'json2csv';
data = json2csv(arrayOfLiteralObjects);      

- headers Props:

Specifying headers helps to define an order of CSV fields , so , the csv content will be generated accordingly.

Notes :

• The meaning of headers with data of type Array is to order fields AND prepend those headers at the top of CSV content.
• The meaning of headers with data of type String data is only prepending those headers as the first line of CSV content.

- separator Props:

Following a request to add this feature , from 1.0.1 release, react-csv supports separator props which is equals by default a comma , .

import {CSVLink} from 'react-csv';

<CSVLink data={array} separator={";"}>
    Download me
</CSVLink>
/*
  This will generate CSV with ";" as delimiter (separator)

 */

1. CSVLink Component:

It renders a hyperlink , and clicking on it will trigger the download action of the CSV document.

It does not accept only data and headers props , but also , it rendered all props of HTMLAnchor tag. (className, target,....)

- filename Props:

filename is another props restricted to CSVLink. It specifies the filename of the downloaded CSV .

example

import {CSVLink} from 'react-csv';

<CSVLink data={data}
  filename={"my-file.csv"}
  className="btn btn-primary"
  target="_blank">
    Download me
</CSVLink>

2. CSVDownload Component:

It triggers downloading ONLY on mounting the component. so , be careful to render this component whenever it is needed.

It does not accept only data and headers props , but also , it takes advantage of all arguments of window.open function known that its signature is :

window.open(ARG0, target, specs, replace )

Thus, target, specs and replace Props are available .

example

import {CSVDownload} from 'react-csv';

<CSVDownload data={data} target="_blank" />

For non-node developers, they have to use CDN version :

 <script src="https://cdn.rawgit.com/abdennour/react-csv/6424b500/cdn/react-csv-latest.min.js" type="text/javascript"></script>

 <script type="text/babel">
   const {CSVDownload, CSVLink} = ReactCSV;// or window.ReactCSV

   const element= (<CSVDownload data={data} target="_blank" />);

   ReactDOM.render(element, document.querySelector('#app'));
 </script>

Contribution :

• Unit-tests must cover at least 90 % of code .

• Write documentation of the new class, function , method , attribute ..so on.. following JSDoc syntax.

• Add an example for the new feature to sample-site.

• npm start runs the sample-site

• npm docgen generates documentation in HTML output.

• npm cdn generate a bundle to be used as CDN

Donation

If this project help you reduce time to develop, you can give me a cup of coffee 🍵 :)