json-to-csv-downloader-react

React JSON to CSV Download

A simple, lightweight React TypeScript component for downloading JSON data as CSV files with automatic or manual header detection.

Features

• 🚀 Simple API - Just pass your JSON data and you're done
• 📊 Auto Header Detection - Automatically extracts headers from your JSON objects
• 🎯 Custom Headers - Specify exactly which columns to export
• 🎨 Fully Customizable - Style it however you want
• 📱 TypeScript Support - Full type safety and IntelliSense
• 🔧 Flexible Content - Use any content inside the button (text, icons, etc.)
• ⚡ Zero Dependencies - Only requires React

Installation

npm install react-json-to-csv-download

Or with yarn:

yarn add react-json-to-csv-download

Quick Start

import JsonToCsvDownload from 'react-json-to-csv-download';

const MyComponent = () => {
  const data = [
    { name: "John Doe", age: 30, city: "New York" },
    { name: "Jane Smith", age: 25, city: "Los Angeles" }
  ];

  return (
    <JsonToCsvDownload data={data}>
      Download CSV
    </JsonToCsvDownload>
  );
};

API Reference

Props

Prop	Type	Default	Description
data	JsonObject[]	[]	Required. Array of objects to convert to CSV
headers	string[] | null	null	Optional. Specific headers to include. If not provided, headers are auto-detected
filename	string	"data.csv"	Name of the downloaded file
className	string	""	CSS classes for styling the button