{"id":19617790,"url":"https://github.com/nzambello/react-csv-reader","last_synced_at":"2025-04-12T22:36:31.593Z","repository":{"id":27783646,"uuid":"115193679","full_name":"nzambello/react-csv-reader","owner":"nzambello","description":"React component that handles csv file input and its parsing","archived":false,"fork":false,"pushed_at":"2023-06-13T00:24:45.000Z","size":6659,"stargazers_count":201,"open_issues_count":10,"forks_count":48,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-04T02:07:45.281Z","etag":null,"topics":["csv","csv-parser","input","javascript","parse","react","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://nzambello.github.io/react-csv-reader/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nzambello.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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":"2017-12-23T12:18:50.000Z","updated_at":"2025-02-06T13:40:38.000Z","dependencies_parsed_at":"2024-06-18T13:39:01.402Z","dependency_job_id":"ee64df21-ea63-4f02-9df2-cd0c31e82f90","html_url":"https://github.com/nzambello/react-csv-reader","commit_stats":{"total_commits":151,"total_committers":20,"mean_commits":7.55,"dds":0.4966887417218543,"last_synced_commit":"0d0a5975f8c702c9e1ea66ac02b4b95abf5db42c"},"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nzambello%2Freact-csv-reader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nzambello%2Freact-csv-reader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nzambello%2Freact-csv-reader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nzambello%2Freact-csv-reader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nzambello","download_url":"https://codeload.github.com/nzambello/react-csv-reader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248642854,"owners_count":21138352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-parser","input","javascript","parse","react","reactjs","typescript"],"created_at":"2024-11-11T11:07:17.655Z","updated_at":"2025-04-12T22:36:31.569Z","avatar_url":"https://github.com/nzambello.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-csv-reader\n\n[![npm version](https://img.shields.io/github/package-json/v/nzambello/react-csv-reader)](https://www.npmjs.com/package/react-csv-reader)\n[![npm](https://img.shields.io/npm/dm/react-csv-reader)](https://www.npmjs.com/package/react-csv-reader)\n![Node.js CI](https://github.com/nzambello/react-csv-reader/workflows/Node.js%20CI/badge.svg?branch=master)\n![a11y axe](https://img.shields.io/badge/a11y-tested-brightgreen)\n![TypeScript Support](https://img.shields.io/badge/TypeScript-Support-blue)\n\nReact component that handles csv file input.\nIt handles file input and returns its content as a matrix.\n\nDocs: [nzambello.github.io/react-csv-reader](https://nzambello.github.io/react-csv-reader/)\n\nYou can try it out in the playground in the [docs](https://nzambello.github.io/react-csv-reader/usage#playground) or in the [demo on Codesandbox](https://codesandbox.io/s/react-csv-reader-vtull).\n\n## Installation\n\nInstall the package with either yarn or npm.\n\nWith yarn:\n\n```sh\nyarn add react-csv-reader\n```\n\nWith npm:\n\n```sh\nnpm install --save react-csv-reader\n```\n\n## Usage\n\nBasic usage:\n\n```javascript\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport CSVReader from 'react-csv-reader'\n\nclass App extends Component {\n  ...\n\n  render() {\n    return (\n      \u003cCSVReader onFileLoaded={(data, fileInfo, originalFile) =\u003e console.dir(data, fileInfo, originalFile)} /\u003e\n    )\n  }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'))\n```\n\nMore complex example:\n\n```javascript\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport CSVReader from 'react-csv-reader'\n\nclass App extends Component {\n  ...\n\n  const papaparseOptions = {\n    header: true,\n    dynamicTyping: true,\n    skipEmptyLines: true,\n    transformHeader: header =\u003e\n      header\n        .toLowerCase()\n        .replace(/\\W/g, '_')\n  }\n\n  render() {\n    return (\n      \u003cCSVReader\n        cssClass=\"csv-reader-input\"\n        label=\"Select CSV with secret Death Star statistics\"\n        onFileLoaded={this.handleForce}\n        onError={this.handleDarkSideForce}\n        parserOptions={papaparseOptions}\n        inputId=\"ObiWan\"\n        inputName=\"ObiWan\"\n        inputStyle={{color: 'red'}}\n      /\u003e\n    )\n  }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'))\n```\n\n### Parameters\n\n| Name          | Type            | Default                  | Description                                                                      |\n| ------------- | --------------- | ------------------------ | -------------------------------------------------------------------------------- |\n| accept        | string          | `.csv, text/csv`         | File type accepted by file input.                                                |\n| cssClass      | string          | `csv-reader-input`       | A CSS class to be applied to the wrapper element.                                |\n| cssInputClass | string          | `csv-input`              | A CSS class to be applied to the `\u003cinput\u003e` element.                              |\n| cssLabelClass | string          | `csv-label`              | A CSS class to be applied to the `\u003clabel\u003e` element.                              |\n| label         | string, element |                          | If present, it will be rendered in a `\u003clabel\u003e` to describe input aim.            |\n| onFileLoaded  | function        |                          | (**_required_**) The function to be called passing loaded results, see below.    |\n| onError       | function        |                          | Error handling function.                                                         |\n| parserOptions | object          | `{}`                     | [PapaParse configuration](https://www.papaparse.com/docs#config) object override |\n| inputId       | string          | `react-csv-reader-input` | An id to be applied to the `\u003cinput\u003e` element.                                    |\n| inputName     | string          | `react-csv-reader-input` | A name attribute to be applied to the `\u003cinput\u003e` element.                         |\n| inputStyle    | object          | `{}`                     | Some style to be applied to the `\u003cinput\u003e` element.                               |\n| fileEncoding  | string          | `UTF-8`                  | Encoding type of the input file.                                                 |\n| disabled      | boolean         | `false`                  | Set input disabled attribute.                                                    |\n| strict        | boolean         | `false`                  | Throws error on `onError` if file type is different from `accept`.               |\n\n### onFileLoaded\n\nWhen the file has been loaded, it will be parsed with [PapaParse](https://github.com/mholt/PapaParse) from a CSV formatted text to a matrix of strings or a list of objects (using `header` option).\nThat parsed data is returned to the parent component with `onFileLoaded` function (it will be passed as an argument).\nThe second argument to `onFileLoaded` will be an object with infos about loaded file.\n\n```typescript\n// data: PapaParse.ParseResult.data\n// fileInfo: IFileInfo\nonFileLoaded: (data: Array\u003cany\u003e, fileInfo: IFileInfo, originalFile: File) =\u003e any\n```\n\nFor type definitions, see [here](src/index.tsx#L20).\n\n## Testing\n\nThis packages uses `jest` for unit tests and snapshot testing.\n\nTo run the tests:\n\n```sh\nyarn test\n```\n\nAutomated accessibility tests are run with `jest-axe`.\n\n## Contributions\n\nPlease follow our [convention](COMMITLINT.md) on commits format.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnzambello%2Freact-csv-reader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnzambello%2Freact-csv-reader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnzambello%2Freact-csv-reader/lists"}