{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-csv-downloader"],"cli":null},"imports":["import CsvDownloader from 'react-csv-downloader';","import type { CsvDownloaderProps } from 'react-csv-downloader';","type Column = { id: string; displayName: string; };"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}