{"id":23062025,"url":"https://github.com/ninsau/react-csvify","last_synced_at":"2026-02-10T00:32:10.671Z","repository":{"id":268286969,"uuid":"903885017","full_name":"ninsau/react-csvify","owner":"ninsau","description":"A composable, extensible, and fully typed React component for generating and downloading CSV files from any dataset.","archived":false,"fork":false,"pushed_at":"2024-12-15T20:35:00.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-19T14:51:07.801Z","etag":null,"topics":["csv","csv-export","csv-files","csv-import","csv-reader","xsl","xslx"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"0bsd","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ninsau.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-15T19:59:20.000Z","updated_at":"2025-01-15T11:23:40.000Z","dependencies_parsed_at":"2024-12-15T20:21:58.482Z","dependency_job_id":"46ccccba-8c84-4b34-a83f-40ac88a83c1b","html_url":"https://github.com/ninsau/react-csvify","commit_stats":null,"previous_names":["ninsau/react-csvify"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/ninsau/react-csvify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsau%2Freact-csvify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsau%2Freact-csvify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsau%2Freact-csvify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsau%2Freact-csvify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ninsau","download_url":"https://codeload.github.com/ninsau/react-csvify/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsau%2Freact-csvify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29287367,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-09T21:57:15.303Z","status":"ssl_error","status_checked_at":"2026-02-09T21:57:11.537Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["csv","csv-export","csv-files","csv-import","csv-reader","xsl","xslx"],"created_at":"2024-12-16T03:19:38.593Z","updated_at":"2026-02-10T00:32:10.665Z","avatar_url":"https://github.com/ninsau.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React CSVify\n\n[![Maintenance](https://img.shields.io/badge/status-maintained-brightgreen)](https://github.com/ninsau/react-csvify)\n[![npm version](https://img.shields.io/npm/v/react-csvify.svg)](https://www.npmjs.com/package/react-csvify)\n[![npm downloads](https://img.shields.io/npm/dm/react-csvify.svg)](https://www.npmjs.com/package/react-csvify)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/react-csvify)](https://bundlephobia.com/package/react-csvify)\n[![License](https://img.shields.io/npm/l/react-csvify.svg)](https://github.com/ninsau/react-csvify/blob/main/LICENSE)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\n[![Tests](https://img.shields.io/badge/tests-passing-brightgreen.svg)](#testing)\n[![Build Status](https://img.shields.io/badge/build-passing-brightgreen.svg)](#installation)\n\nA **production-ready**, composable, and fully typed React component for generating and downloading CSV, TSV, and JSON files from any dataset. Designed for advanced customization, zero dependencies, and seamless integration into modern React or Next.js applications.\n\n## 📚 Documentation\n\n- **[📖 API Reference](docs/API.md)** - Complete prop reference and function documentation\n- **[💡 Examples \u0026 Use Cases](docs/EXAMPLES.md)** - Real-world examples and advanced patterns\n- **[🛠️ Guide](docs/GUIDE.md)** - Step-by-step implementation guides\n- **[🤖 Schema Reference](docs/SCHEMA.md)** - JSON schema definitions for AI/automation\n- **[❓ FAQ](docs/FAQ.md)** - Frequently asked questions\n\n## 🚀 Key Features\n\n- **🎯 Zero Configuration** - Works out of the box with sensible defaults\n- **📊 Multiple Format Support** - Export to CSV, TSV, and JSON with unified API\n- **🔄 Bidirectional CSV** - Parse CSV strings back into typed objects\n- **✨ Advanced Data Transformation** - Custom formatters and value transformers\n- **🚀 Progress Tracking** - Monitor download progress for large datasets\n- **🎨 Fully Customizable UI** - Use default link or inject your own button\n- **📦 Zero Dependencies** - React-only, works everywhere\n- **♿ Accessible** - Screen reader friendly and keyboard accessible\n- **🌳 Tree-Shakable** - Import only what you need\n- **⚡ High Performance** - Optimized for large datasets\n- **🧪 Fully Tested** - Comprehensive test suite with \u003e80% coverage\n- **📝 TypeScript Ready** - 100% type-safe API\n\n## 📦 Installation\n\n```bash\nnpm install react-csvify@latest\n# or\nyarn add react-csvify@latest\n# or\npnpm add react-csvify@latest\n```\n\n### Bundle Size Impact\n\n- **Minified**: ~12KB\n- **Minified + Gzipped**: ~4KB\n- **Zero runtime dependencies**\n- **Tree-shakable exports**\n\n## ✅ Prerequisites\n\n| Requirement | Version | Notes |\n| --- | --- | --- |\n| **React** | 16+ | Hooks-based components |\n| **React DOM** | 16+ | Standard DOM rendering |\n| **TypeScript** | 4.5+ | Recommended for best experience |\n| **Node.js** | 16+ | For development and building |\n\n\u003e **Note**: This package has `react` and `react-dom` as peer dependencies. Ensure they're already installed in your project.\n\n## 🚀 Quick Start\n\n### Basic Usage\n\n```tsx\n\"use client\";\nimport React from \"react\";\nimport { DownloadButton } from \"react-csvify\";\n\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n}\n\nexport default function BasicExample() {\n  const users: User[] = [\n    { id: 1, name: \"Alice Johnson\", email: \"alice@example.com\" },\n    { id: 2, name: \"Bob Smith\", email: \"bob@example.com\" },\n    { id: 3, name: \"Carol Davis\", email: \"carol@example.com\" },\n  ];\n\n  return (\n    \u003cDownloadButton\n      data={users}\n      filename=\"users.csv\"\n    /\u003e\n  );\n}\n```\n\n### Multiple Format Support\n\n```tsx\nimport { DownloadButton } from \"react-csvify\";\n\nexport default function MultiFormatExample() {\n  const data = [\n    { id: 1, name: \"Alice\", active: true },\n    { id: 2, name: \"Bob\", active: false },\n  ];\n\n  return (\n    \u003cdiv className=\"space-y-4\"\u003e\n      {/* Export as CSV */}\n      \u003cDownloadButton data={data} filename=\"data.csv\" /\u003e\n\n      {/* Export as TSV */}\n      \u003cDownloadButton data={data} filename=\"data.tsv\" /\u003e\n\n      {/* Export as JSON */}\n      \u003cDownloadButton data={data} filename=\"data.json\" /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Advanced Usage with Validation \u0026 Transformation\n\n```tsx\n\"use client\";\nimport React, { useState } from \"react\";\nimport {\n  DownloadButton,\n  validateCsvData,\n  formatCsvValue,\n  parseCSV,\n} from \"react-csvify\";\n\nexport default function AdvancedExample() {\n  const [validationErrors, setValidationErrors] = useState\u003cstring[]\u003e([]);\n  const data = [\n    { id: 1, name: \"Alice\", joinDate: \"2024-01-15\", score: 95.5 },\n    { id: 2, name: \"Bob\", joinDate: \"2024-02-20\", score: 88.3 },\n  ];\n\n  const handleDownload = () =\u003e {\n    // Validate before download\n    const validation = validateCsvData(data, {\n      maxRows: 10000,\n      maxFieldSize: 5000,\n      allowEmpty: false,\n    });\n\n    if (!validation.valid) {\n      setValidationErrors(validation.errors);\n      return;\n    }\n\n    setValidationErrors([]);\n  };\n\n  return (\n    \u003cdiv\u003e\n      {validationErrors.length \u003e 0 \u0026\u0026 (\n        \u003cdiv className=\"error-box\"\u003e\n          {validationErrors.map((err, idx) =\u003e (\n            \u003cp key={idx}\u003e{err}\u003c/p\u003e\n          ))}\n        \u003c/div\u003e\n      )}\n\n      \u003cDownloadButton\n        data={data}\n        filename=\"users.csv\"\n        transformValue={(value, key) =\u003e {\n          if (key === \"score\" \u0026\u0026 typeof value === \"number\") {\n            return value.toFixed(1);\n          }\n          return String(value);\n        }}\n        onDownloadStart={handleDownload}\n        customButton={\n          \u003cbutton className=\"bg-blue-500 text-white px-4 py-2 rounded\"\u003e\n            Export CSV\n          \u003c/button\u003e\n        }\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Core Features\n\n### Component: DownloadButton\n\nThe main React component for triggering downloads.\n\n```tsx\n\u003cDownloadButton\n  data={users}\n  filename=\"export.csv\"\n  customHeaders={[\"ID\", \"Full Name\", \"Email\"]}\n  transformValue={(value, key, row) =\u003e {\n    // Custom formatting\n    if (key === \"joinDate\") {\n      return new Date(value as string).toLocaleDateString();\n    }\n    return String(value);\n  }}\n  onDownloadStart={() =\u003e console.log(\"Starting...\")}\n  onProgress={(progress) =\u003e console.log(`${progress.percentage}% complete`)}\n  onDownloadComplete={() =\u003e console.log(\"Done!\")}\n  onError={(error) =\u003e console.error(error)}\n/\u003e\n```\n\n### Utilities: Parse \u0026 Validate\n\n**Parse CSV strings back to objects:**\n\n```tsx\nimport { parseCSV, parseTSV, detectDelimiter } from \"react-csvify\";\n\nconst csvContent = `id,name,email\n1,Alice,alice@example.com\n2,Bob,bob@example.com`;\n\nconst result = parseCSV(csvContent);\nif (result.success) {\n  console.log(result.data); // Typed array of objects\n}\n\n// Auto-detect delimiter\nconst delimiter = detectDelimiter(csvContent);\n```\n\n**Validate data before export:**\n\n```tsx\nimport { validateCsvData, detectDataIssues } from \"react-csvify\";\n\nconst validation = validateCsvData(data, {\n  maxRows: 10000,\n  allowEmpty: false,\n});\n\nif (!validation.valid) {\n  console.error(\"Validation errors:\", validation.errors);\n}\n\n// Detect potential issues\nconst issues = detectDataIssues(data);\n```\n\n**Format \u0026 transform values:**\n\n```tsx\nimport { formatCsvValue, formatCsvRow } from \"react-csvify\";\n\nconst formatted = formatCsvValue(\"Hello, World\", true);\nconsole.log(formatted.formatted); // \"Hello, World\"\n\nconst row = formatCsvRow(\n  [\"id\", \"name\", \"active\"],\n  \",\",\n  true\n);\n```\n\n### Generate Content Programmatically\n\n```tsx\nimport {\n  generateContent,\n  generateContentWithProgress,\n} from \"react-csvify\";\n\n// Simple generation\nconst csv = generateContent(data, \"csv\", {\n  delimiter: \",\",\n  quoteValues: true,\n  customHeaders: [\"ID\", \"Name\"],\n});\n\n// With progress tracking\ngenerateContentWithProgress(\n  largeDataset,\n  \"json\",\n  (progress) =\u003e {\n    console.log(`Processing: ${progress.percentage}%`);\n  },\n  { prettifyJson: true }\n);\n```\n\n## Advanced Examples\n\nSee **[EXAMPLES.md](docs/EXAMPLES.md)** for:\n\n- Filtering and sorting before export\n- Batch processing multiple exports\n- React Query integration\n- Form data export\n- Database export workflows\n- Conditional column selection\n- Custom styling and theming\n\n## Prop Reference\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `data` | `T[]` | Required | Array of objects to export |\n| `filename` | `string` | Required | Output filename (extension determines format) |\n| `delimiter` | `string` | `\",\"` | Field delimiter (CSV only) |\n| `quoteValues` | `boolean` | `true` | Wrap values in quotes |\n| `transformValue` | `(value, key, row) =\u003e string` | – | Custom value formatter |\n| `customHeaders` | `string[]` | – | Override auto-generated headers |\n| `customButton` | `ReactNode` | – | Custom trigger button/component |\n| `emptyDataMessage` | `string` | `\"No data available.\"` | Message when data is empty |\n| `onDownloadStart` | `() =\u003e void` | – | Called before generation |\n| `onDownloadComplete` | `() =\u003e void` | – | Called after successful download |\n| `onError` | `(error: Error) =\u003e void` | – | Error handler |\n| `onProgress` | `(progress) =\u003e void` | – | Progress callback for large datasets |\n| `chunkSize` | `number` | `1000` | Rows processed before progress update |\n\n## Contributing\n\nContributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for details.\n\n## Changelog\n\nSee [CHANGELOG.md](CHANGELOG.md) for version history and updates.\n\n## Versioning\n\nWe use [Semantic Versioning](https://semver.org/). Current version: **1.1.0**\n\n## License\n\nThis project is licensed under the ISC License - see the [LICENSE](LICENSE) file for details.\n\n## Code of Conduct\n\nThis project adheres to the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md).\n\n## Support\n\n- **Issues**: [GitHub Issues](https://github.com/ninsau/react-csvify/issues)\n- **Discussions**: [GitHub Discussions](https://github.com/ninsau/react-csvify/discussions)\n- **Security**: Report security issues privately to maintainers\n\n## ⭐ Support the Project\n\nIf you find this library helpful:\n\n- **⭐ Star the repository** - Helps others discover the project\n- **🐛 Report bugs** - Help improve stability\n- **💡 Request features** - Suggest improvements\n- **📖 Improve docs** - Help other developers\n- **🤝 Contribute code** - Join development\n\nYour support keeps this project maintained and improved! 🚀\n\n## Acknowledgments\n\n- Built with React and TypeScript\n- Inspired by common data export patterns\n- Thanks to all contributors and users\n\n---\n\nMade with ❤️ by [ninsau](https://github.com/ninsau)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fninsau%2Freact-csvify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fninsau%2Freact-csvify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fninsau%2Freact-csvify/lists"}