How to Download to CSV File with React

Introduction

In this article, we will see how we can implement a download to CSV file feature in ReactJS. I will use the react-csv package to download a pre-defined Dataset with a simple button. Then we will enhance it to query an external API to fetch a dynamic Dataset and download it as a CSV file on the fly.

Pre-requisites

NodeJS should be installed.

Step 1 - Create a Simple React Project

Let us begin by creating a simple react application. The simplest way to create a React application is to use the npx create-react-app command.

npx create-react-app download-csv-demo
npx is the node package executor which come by default with npm 5.2.0 and upwords. It bascailly executes the executables inside the node module bin folder. Example: /node_modules/typescript/bin/tsc

This command will create a starter template react project and install all required dependencies.

Packages like react, react-dom, react-scripts, etc will be downloaded when you run this command.

Step 2 - Install react-csv Package

We will use the react-csv package to implement a simple download CSV file feature in our react application.

To install react-csv run:

npm install react-csv --save
This should be executed inside the project directory (download-csv-demo)
--save is to save the details of the react-csv package inside the project package.json file. NPM v5.0.0 and upwords does this by default without specifying the --save option.

This command will download and install the CSVLink node package. The --save argument will add the package details as a dependency in the package.json file.

Alternatively, you can include the dependency in project's package.json and run npm install to install the dependency.

"react-csv": "^2.0.3",

In src/App.js file add the following line to import the CSVLink component.

import { CSVLink } from 'react-csv';

Now, for the demo purpose, lets remove all line from App.js return function and add a simple button.

return (
    <button>Download CSV</button>
);

Step 2 - Create Your Data Set

To demonstrate the download as CSV feature lets create a simple data of a list of users.

    let users = [
        ["FirstName", "LastName", "Email"],
        ["Jhon", "Carter", "jhon.carter@test.com"],
        ["Alex", "", "alex@test.com"],
        ["Peter", "", "peter@test.com"],
        ["Don", "Richard", "don.richar@test.com"]
    ];

Step 3 - Add a Button to Download CSV file

Now wrap the button with a <CSVLink> element:

<CSVLink data={users} filename={'user-list.csv'}>
	<button>Download</button>
</CSVLink>

Step 4 - Run and Test the Download CSV Feature

Full Code

This is the full demo code to download a list of uses as a CSV file with reac-csv package in react.

import logo from './logo.svg';
import './App.css';
import { CSVLink } from 'react-csv';

function App() {
  let users = [
    ["FirstName", "LastName", "Email"],
    ["Jhon", "Carter", "jhon.carter@test.com"],
    ["Alex", "", "alex@test.com"],
    ["Peter", "", "peter@test.com"],
    ["Don", "Richard", "don.richar@test.com"]
  ];
  return (
    <CSVLink data={users} filename={'user-list.csv'}>
      <button>Download CSV</button>
  </CSVLink>
  );
}

export default App;
App.js

Conclusion

react-csv is a simple and light weight node package which can be used to build a simple download as CSV file feature in your React application.

Nithya Binoy

Nithya Binoy