@simuratli/react-json-csv-converter

📦 @simuratli/react-json-csv-converter

A lightweight and customizable React component that enables users to download JSON data as a CSV file with a single button click.

🚀 Features

• 🧠 Auto-detects headers from your JSON data.
• 🎯 Supports custom headers with label/key mapping.
• 💡 Handles special characters in CSV (e.g., commas, quotes, newlines).
• ⚛️ Fully typed with TypeScript.
• 🎨 Accepts any button props (className, disabled, etc.) for customization.

📦 Installation

npm install @simuratli/react-json-csv-converter

or

yarn add @simuratli/react-json-csv-converter

✨ Usage

1. Auto-detect headers from JSON:

import { JsonToCsvDownload } from '@simuratli/react-json-csv-converter';

const data = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 }
];

<JsonToCsvDownload data={data} filename="users.csv">
  Export Users
</JsonToCsvDownload>;

2. With custom headers (label + key):

import { JsonToCsvDownload } from '@simuratli/react-json-csv-converter';

const data = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 }
];

const headers = [
  { label: 'User ID', key: 'id' },
  { label: 'Full Name', key: 'name' },
  { label: 'User Age', key: 'age' }
];

<JsonToCsvDownload
  data={data}
  headers={headers}
  filename="custom_users.csv"
  className="my-custom-button"
>
  Download CSV
</JsonToCsvDownload>;

📘 Props

Prop	Type	Description
data	object[]	Required. The JSON array to convert and download as CSV.
headers	{ label: string, key: string }[] | null	Optional. Custom headers for CSV: display label and extract from key.
filename	string	Optional. Name of the downloaded CSV file. Default is data.csv.
className	string	Optional. Custom CSS classes for the button.
children	ReactNode	Optional. Button label/content. Default is "Download CSV".
onDownload	() => void	Optional. Callback after successful CSV download.
...props	ButtonHTMLAttributes<HTMLButtonElement>	Optional. All standard <button> props supported.

🧪 Development

npm run dev

📄 License

MIT © Your Name or GitHub Handle