{"library":"react-csv","title":"React CSV Generation","description":"react-csv is a React component library for generating Comma Separated Values (CSV) files directly from data within a React application. It supports various input data formats, including arrays of arrays, arrays of literal objects, and pre-formatted strings. The library provides two primary components: `CSVLink` for creating an HTML anchor element that triggers a CSV download, and `CSVDownload` for initiating an immediate download programmatically. The current stable version is 2.2.2, though development activity appears to have slowed, with the last publish being four years ago. It handles common scenarios like custom headers, nested data (via dot notation), and supports various browser environments with specific fixes for Safari and Chrome. It differentiates itself by offering straightforward components to directly output CSV from client-side React state or props, without requiring server-side processing for basic CSV generation.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-csv"],"cli":null},"imports":["import { CSVLink } from 'react-csv';","import { CSVDownload } from 'react-csv';","const { CSVLink, CSVDownload } = require('react-csv');","import type { CSVLinkProps, CSVDownloadProps } from 'react-csv';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { CSVLink, CSVDownload } from 'react-csv';\n\nconst csvData = [\n  [\"firstname\", \"lastname\", \"email\"],\n  [\"Ahmed\", \"Tomi\", \"ah@smthing.co.com\"],\n  [\"Raed\", \"Labes\", \"rl@smthing.co.com\"],\n  [\"Yezzi\", \"Min l3b\", \"ymin@cocococo.com\"]\n];\n\nfunction CsvExportComponent() {\n  return (\n    <div>\n      <h2>Download CSV Examples</h2>\n      <p>Click the link to download the CSV:</p>\n      <CSVLink data={csvData} filename=\"my-data.csv\">Download me as a link</CSVLink>\n      <br /><br />\n      <p>Or trigger an immediate download (e.g., on page load, or a button click handler):</p>\n      <button onClick={() => alert('CSV will download shortly (check browser downloads)')}>\n        Initiate direct download (check console for real usage)\n      </button>\n      {/* This component will trigger a download immediately on render if not controlled */}\n      {/* For a real use case, CSVDownload would be conditionally rendered or part of a click handler */}\n      {/* <CSVDownload data={csvData} target=\"_blank\" filename=\"my-direct-download.csv\" /> */}\n    </div>\n  );\n}\n\nexport default CsvExportComponent;","lang":"typescript","description":"This quickstart demonstrates how to use both `CSVLink` to create a downloadable link and how `CSVDownload` can trigger a direct download, providing basic CSV data from an array of arrays.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}