react-json-csv-export

React component to export or download csv file from json data

Features

• 👉 Download csv file from json data

• 🪝 Component - With JsonToCsvExport it's easier to download/export csv file from json

• 🛠 Written in TypeScript - It will support right into your existing TypeScript

• 💥 Lightweight - Under 2kB

• 📀 Optional - Easy to configure with Headers/FileName/Seperator/ButtonName/Styles

Installation

Using npm:

npm install react-json-csv-export --save

Using yarn:

yarn add react-json-csv-export

Usage

Sample Usage

import React from "react";

import { JsonToCsvExport } from "react-json-csv-export";

const Component = () => {

  const mockJsonData = [
    {id: 1, firstName:"John", lastName:"Miller", email: "[e-mail]" },
    {id: 2, firstName:"Adam", lastName:"Josh", email: "[e-mail]" },
    {id: 3, firstName:"Martin", lastName:"Grey", email: "[e-mail]" }
  ]

  return (
    <div>
      <JsonToCsvExport data={mockJsonData} />
    </div>
  );
};

Sample Usage - Csv file containing chosen fields from Header

import React from "react";

import { JsonToCsvExport } from "react-json-csv-export";

const Component = () => {

  const mockJsonData = [
    { id: 1, firstName:"John", lastName:"Miller", email: "[e-mail]", gender:"Male", phone:"6797653"},
    { id: 2, firstName:"Adam", lastName:"Josh", email: "[e-mail]", gender:"Male", phone:"3457652" },
    { id: 3, firstName:"Lucy", lastName:"Grey", email: "[e-mail]", gender:"Female", phone:"696797654" }
  ]

  const mockHeaders = [
    { key: "id", title:"Id" },
    { key: "firstName", title:"First Name" },
    { key: "email", title:"Email" },
  ]

  return (
    <div>
      <JsonToCsvExport 
        data={mockJsonData} 
        headers={mockHeaders} 
       />        
    </div>
  );
};

Sample Usage with Headers and other properties

import React from "react";

import { JsonToCsvExport } from "react-json-csv-export";

const Component = () => {

  const mockJsonData = [
    { id: 1, firstName:"John", lastName:"Miller", email: "[e-mail]" },
    { id: 2, firstName:"Adam", lastName:"Josh", email: "[e-mail]" },
    { id: 3, firstName:"Martin", lastName:"Grey", email: "[e-mail]" }
  ]

  const mockHeaders = [
    { key: "id", title:"Id" },
    { key: "firstName", title:"First Name" },
    { key: "lastName", title:"Last Name" },
    { key: "email", title:"Email Address" }
  ]

  return (
    <div>
      <JsonToCsvExport 
        data={mockJsonData} 
        headers={mockHeaders}         
        seperator=";" 
        fileName="Report.csv"
        buttonName="Download Report"
        cssStyle={{border: 'solid 1px grey',padding : '10px'}}
        cssClass="cursor-pointer text-red-400"
       />        
    </div>
  );
};

Properties

No	Property	Type	Mandatory	Default	Desc
1	data	[]	Yes		Array of objects
2	headers	[{ key: string; title: string;}...]	No	fetch keys from data	Only mentioned header keys are available for download
3	seperator	string	No	","	column separator
4	fileName	string	No	"export.csv"	csv file name to be downloaded
5	buttonName	string	No	"Export"	Name of the button
6	cssStyle	string	No		Inline style for button
7	cssClass	string	No		Class name for button