{"id":15176,"library":"react-csv-downloader","title":"React CSV Downloader","description":"react-csv-downloader is a React component designed for client-side CSV file generation and download directly from JavaScript objects. Currently stable at version 3.3.0, the library is actively maintained with releases as needed, typically every few months, addressing issues and introducing minor enhancements. Its key differentiators include a straightforward API for defining columns and data, robust support for asynchronous data loading via Promises or functions, and extensive options for customizing filename prefixes, suffixes, and column separators. It empowers developers to provide users with direct CSV download capabilities without requiring server-side data processing, making it particularly suitable for front-end heavy applications. The package also ships with comprehensive TypeScript types, enhancing the developer experience by providing strong type checking and autocompletion.","status":"active","version":"3.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/dolezel/react-csv-downloader","tags":["javascript","React","CSV","Export","Download","typescript"],"install":[{"cmd":"npm install react-csv-downloader","lang":"bash","label":"npm"},{"cmd":"yarn add react-csv-downloader","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-csv-downloader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for the React component.","package":"react","optional":false}],"imports":[{"note":"This package uses a default export for the main component. Ensure your bundler handles ESM imports correctly in modern React setups.","wrong":"const CsvDownloader = require('react-csv-downloader');","symbol":"CsvDownloader","correct":"import CsvDownloader from 'react-csv-downloader';"},{"note":"For explicit TypeScript prop typing and improved developer experience.","symbol":"CsvDownloaderProps","correct":"import type { CsvDownloaderProps } from 'react-csv-downloader';"},{"note":"While not directly exported, this type signature reflects the expected structure for the 'columns' prop. Define it in your application for better type safety.","symbol":"Column","correct":"type Column = { id: string; displayName: string; };"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport CsvDownloader from 'react-csv-downloader';\n\ninterface DataRow {\n  id: number;\n  name: string;\n  email: string;\n}\n\nconst columns = [\n  { id: 'id', displayName: 'User ID' },\n  { id: 'name', displayName: 'Full Name' },\n  { id: 'email', displayName: 'Email Address' },\n];\n\nconst MyCsvExporter: React.FC = () => {\n  const [loading, setLoading] = useState(false);\n\n  // Simulate an async data fetch\n  const getAsyncData = (): Promise<DataRow[]> => {\n    setLoading(true);\n    return new Promise((resolve) => {\n      setTimeout(() => {\n        const data: DataRow[] = [\n          { id: 1, name: 'John Doe', email: 'john.doe@example.com' },\n          { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com' },\n          { id: 3, name: 'Peter Jones', email: 'peter.jones@example.com' },\n        ];\n        setLoading(false);\n        resolve(data);\n      }, 1500);\n    });\n  };\n\n  return (\n    <div>\n      <h1>User Data Export</h1>\n      <p>Click the button to download user data as a CSV file.</p>\n      <CsvDownloader\n        columns={columns}\n        datas={getAsyncData} // Using async function resolver\n        filename=\"user_data_export\"\n        extension=\".csv\"\n        separator=\";\"\n        prefix={true} // Add timestamp prefix\n      >\n        <button disabled={loading}>\n          {loading ? 'Preparing...' : 'Download CSV'}\n        </button>\n      </CsvDownloader>\n      <br />\n      <p>Or a simpler button without children:</p>\n      <CsvDownloader\n        datas={[{ name: 'Alice', age: 30 }, { name: 'Bob', age: 24 }]}\n        filename=\"simple_data\"\n        text=\"Download Simple CSV\"\n      />\n    </div>\n  );\n};\n\nexport default MyCsvExporter;\n","lang":"typescript","description":"Demonstrates how to use `CsvDownloader` with asynchronous data fetching, custom columns, filename options, and both child component and `text` prop usage."},"warnings":[{"fix":"Review component usage and test thoroughly, especially if relying on previous dependency behaviors or browser-specific rendering nuances. Ensure your project's TypeScript configuration is compatible.","message":"Version 3.0.0 of `react-csv-downloader` included a migration to TypeScript and internal dependency updates. While no explicit API breaks were announced, projects relying on specific internal behaviors or older browser compatibility might experience subtle changes. Thorough testing is recommended when upgrading from v2.x.x.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always explicitly include a `filename` prop with a string value for the `CsvDownloader` component, e.g., `<CsvDownloader filename=\"my_report\" ... />`.","message":"The `filename` prop is marked as required in the component's type definition and documentation, but examples sometimes omit it. Not providing this prop will result in console warnings and may lead to unexpected default filenames or behavior in different browser environments.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Adjust your project's `react` version or use `package.json` `overrides` or `resolutions` (depending on your package manager) to align with the specified peer dependency range.","message":"Ensure your project's `react` version falls within the peer dependency range (`^16.6.3 || ^17.0.0 || ^18.0.0 || ^19.0.0`). Mismatched peer dependencies can lead to installation warnings, unexpected runtime errors, or instability within your React application.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Verify that your async `datas` function correctly returns `Promise.resolve(arrayOfObjects)` and that each object in the array represents a row with key-value pairs corresponding to your desired CSV columns.","message":"When providing the `datas` prop as a function, it must return a `Promise` that resolves to an array of plain JavaScript objects. Incorrectly formatted data (e.g., non-Promise return, malformed array, or non-object items) can result in an empty or corrupt CSV file without explicit error messages from the component.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Add a `filename` prop with a string value: `<CsvDownloader filename=\"my_data_export\" ... />`.","cause":"The 'filename' prop was not provided to the CsvDownloader component, or was explicitly set to null/undefined.","error":"Failed prop type: The prop `filename` is marked as required in `CsvDownloader`, but its value is `null`."},{"fix":"First, ensure the package is installed by running `npm install --save react-csv-downloader`. Then, verify the import statement is `import CsvDownloader from 'react-csv-downloader';`.","cause":"The `react-csv-downloader` package is either not installed or the import path is incorrect.","error":"Module not found: Can't resolve 'react-csv-downloader' in '.../src/App.js'"},{"fix":"Debug the `datas` prop's value. If it's an array, ensure it contains objects. If it's a function, confirm it returns a `Promise` that resolves to an array of objects, and that the resolved data is not empty or malformed.","cause":"The `datas` prop did not resolve to a correctly formatted array of objects, or the array was empty unexpectedly. This often happens with async data if the promise doesn't resolve or resolves with incorrect data.","error":"TypeError: Cannot read properties of undefined (reading 'map') (or similar data processing error in the browser console leading to an empty CSV)"},{"fix":"Ensure `CsvDownloader` wraps only a single React element, like a `<button>` or `<a>`. If you don't need to wrap a child, use the `text` prop instead: `<CsvDownloader text=\"Download\" ... />`.","cause":"The `CsvDownloader` component was given multiple children, or a non-element child (e.g., a string or fragment) when used as a wrapper for a trigger element.","error":"React.Children.only expected to receive a single React element child."}],"ecosystem":"npm"}