React react-json-to-csv Example to Export Mock JSON Data to CSV File and Download it in Browser

Welcome folks today in this blog post we will be exporting mock json data to csv file and download it inside the browser in react.js using the react-json-to-csv library. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js app using the below command as shown below

npx create-react-app sampleapp

cd sampleapp

npm i react-json-to-csv

And after that you will see the below directory structure of the react.js project as shown below

And now we need to edit the App.js file and copy paste the following code which is shown below

App.js

import './App.css';
import React, { createRef } from "react";

import CsvDownloadButton from 'react-json-to-csv'


function App() {

  let mockData = [
    {
      name:'John',
      country:'New Zealand'
    },
    {
      name:'John',
      country:'New Zealand'
    },
    {
      name:'John',
      country:'New Zealand'
    },
    {
      name:'John',
      country:'New Zealand'
    }
  ]

  

  return (
    <div>
      <CsvDownloadButton headers={['customName,customCountry']} filename='file.csv' data={mockData}/>
    </div>
  );
}

export default App;

import './App.css';

import React, { createRef } from "react";

import CsvDownloadButton from 'react-json-to-csv'

function App() {

let mockData = [

{

name:'John',

country:'New Zealand'

{

name:'John',

country:'New Zealand'

{

name:'John',

country:'New Zealand'

{

name:'John',

country:'New Zealand'

}

]

return (

<div>

</div>

);

}

export default App;

As you can see we are importing the module at the top and then we are passing the mock json data and then we are passing the custom filename of the csv file and then you can even pass the headers and columns of the csv file.