{"id":13858,"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.","status":"maintenance","version":"2.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/react-csv/react-csv","tags":["javascript","csv","excel","react","file","IO","download","hyperlink","component"],"install":[{"cmd":"npm install react-csv","lang":"bash","label":"npm"},{"cmd":"yarn add react-csv","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-csv","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for any React component library. Required for rendering the components.","package":"react","optional":false},{"reason":"Peer dependency for any React component library. Required for rendering the components.","package":"react-dom","optional":false}],"imports":[{"note":"CSVLink is a named export. It's the primary component for triggering downloads via a link element.","wrong":"import CSVLink from 'react-csv';\nconst CSVLink = require('react-csv').CSVLink;","symbol":"CSVLink","correct":"import { CSVLink } from 'react-csv';"},{"note":"CSVDownload is a named export. Use it to trigger an immediate, programmatic download.","wrong":"import CSVDownload from 'react-csv';\nconst CSVDownload = require('react-csv').CSVDownload;","symbol":"CSVDownload","correct":"import { CSVDownload } from 'react-csv';"},{"note":"This pattern works for CommonJS environments, typically Node.js or older bundlers. ESM is preferred for modern React projects.","wrong":"const ReactCSV = require('react-csv');\nconst CSVLink = ReactCSV.CSVLink;","symbol":"CommonJS (all exports)","correct":"const { CSVLink, CSVDownload } = require('react-csv');"},{"note":"TypeScript definitions for react-csv are available via @types/react-csv.","symbol":"Types","correct":"import type { CSVLinkProps, CSVDownloadProps } from 'react-csv';"}],"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."},"warnings":[{"fix":"Upgrade to `react-csv` version 2.0.1 or higher to resolve `componentWillReceiveProps` warnings and improve compatibility with modern React versions.","message":"The `componentWillReceiveProps` lifecycle method, deprecated in React 16.3, was addressed in `react-csv` v2.0.1. Older versions of `react-csv` may cause warnings or issues with newer React versions.","severity":"breaking","affected_versions":"<2.0.1"},{"fix":"Ensure your Node.js environment is Node.js 13 or newer if you are building `react-csv` from source or encountering build-time compatibility errors.","message":"Version 2.0.1 migrated the build runtime environment from Node.js 6 to Node.js 13. While this primarily affects contributors, users building from source or with strict Node.js environment checks might encounter compatibility issues with older Node.js versions.","severity":"gotcha","affected_versions":">=2.0.1"},{"fix":"For improved browser compatibility and nested data handling, upgrade to `react-csv` version 1.1.2 or higher.","message":"Older versions (prior to v1.1.2) had known issues with dot notation in headers for nested data and specific rendering problems in Internet Explorer 11. Safari downloads also had bugs in versions prior to v1.1.1 and v1.0.17.","severity":"gotcha","affected_versions":"<1.1.2"},{"fix":"Be aware that generated CSV URIs are now short object URLs, which might affect how they are handled in certain contexts (e.g., logging, inspection) compared to the previous long data URIs.","message":"In `react-csv` v1.0.14, the `buildURI` function was changed to use `URL.createObjectURL` to return a shorter URL for the CSV. This fixed a 'Chrome network error' but means the generated URI is no longer a long data URI.","severity":"gotcha","affected_versions":">=1.0.14"},{"fix":"Upgrade to `react-csv` version 1.0.13 or higher to correctly handle `null` values, which will typically be rendered as empty cells in the CSV.","message":"Prior to version 1.0.13, `null` values in data were downloaded as the string 'null' in the CSV output.","severity":"gotcha","affected_versions":"<1.0.13"}],"env_vars":null,"search_vec":"'2.2.2':76 'activ':79 'ago':91 'anchor':56 'appear':80 'applic':25 'array':33,35,36 'basic':142 'browser':107 'chrome':115 'client':129 'client-sid':128 'comma':14 'common':94 'compon':10,50,122,153 'creat':53 'csv':2,6,17,61,126,143,146 'csvdownload':64 'csvlink':51 'current':72 'custom':97 'data':21,30,100 'develop':78 'differenti':117 'direct':19,124 'dot':102 'download':62,69,151 'element':57 'environ':108 'excel':147 'file':18,149 'fix':111 'format':31,43 'four':89 'generat':3,13,144 'handl':93 'header':98 'html':55 'hyperlink':152 'immedi':68 'includ':32 'initi':66 'input':29 'io':150 'javascript':145 'last':86 'librari':11,46 'like':96 'liter':38 'nest':99 'notat':103 'object':39 'offer':120 'output':125 'pre':42 'pre-format':41 'primari':49 'process':140 'programmat':70 'prop':134 'provid':47 'publish':87 'react':1,5,9,24,131,148 'react-csv':4 'requir':136 'safari':113 'scenario':95 'separ':15 'server':138 'server-sid':137 'side':130,139 'slow':83 'specif':110 'stabl':73 'state':132 'straightforward':121 'string':44 'support':27,105 'though':77 'trigger':59 'two':48 'valu':16 'various':28,106 'version':74 'via':101 'within':22 'without':135 'year':90","created_at":"2026-04-20T01:56:40.475343+00:00","updated_at":"2026-04-20T01:56:40.475343+00:00","problems":[{"fix":"Update `react-csv` to version 2.0.1 or newer: `npm install react-csv@^2`.","cause":"Using an older version of `react-csv` with a modern React version (16.3+).","error":"Warning: componentWillReceiveProps has been renamed, and is not recommended for use."},{"fix":"Upgrade `react-csv` to version 1.1.1 or higher: `npm install react-csv@^1.1.1`.","cause":"Known browser compatibility bugs in older `react-csv` versions, specifically affecting Safari's download mechanism.","error":"CSV download not working or opening correctly in Safari."},{"fix":"Upgrade `react-csv` to version 1.0.13 or higher: `npm install react-csv@^1.0.13`.","cause":"Versions of `react-csv` prior to 1.0.13 would serialize `null` values as the string 'null'.","error":"CSV output contains 'null' strings instead of empty cells for null data."},{"fix":"Upgrade `react-csv` to version 1.0.14 or higher, which utilizes `URL.createObjectURL` to generate shorter, more robust URLs for downloads. `npm install react-csv@^1.0.14`.","cause":"Older `react-csv` versions generated very long data URIs for CSVs, which could exceed browser limits.","error":"Getting 'Network Error' in Chrome or 'URI too long' errors for large CSVs."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://www.npmjs.com/package/react-csv","github":"https://github.com/react-csv/react-csv","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-csv","openapi_spec":null,"status_page":null,"smithery":null,"categories":["data","serialization","web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}