{"id":21835892,"url":"https://github.com/vtex/react-csv-parse","last_synced_at":"2025-10-23T16:50:26.469Z","repository":{"id":65782777,"uuid":"103308817","full_name":"vtex/react-csv-parse","owner":"vtex","description":"Import data from a csv file to your app and your api.","archived":false,"fork":false,"pushed_at":"2018-10-12T00:06:36.000Z","size":167,"stargazers_count":42,"open_issues_count":3,"forks_count":20,"subscribers_count":144,"default_branch":"master","last_synced_at":"2025-04-14T09:19:45.080Z","etag":null,"topics":["srv-customer-credit","xp-financial"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/vtex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-12T18:50:41.000Z","updated_at":"2023-10-27T20:17:17.000Z","dependencies_parsed_at":"2023-02-09T19:45:18.270Z","dependency_job_id":null,"html_url":"https://github.com/vtex/react-csv-parse","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Freact-csv-parse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Freact-csv-parse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Freact-csv-parse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Freact-csv-parse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex","download_url":"https://codeload.github.com/vtex/react-csv-parse/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248852186,"owners_count":21171843,"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":["srv-customer-credit","xp-financial"],"created_at":"2024-11-27T20:25:58.754Z","updated_at":"2025-10-23T16:50:21.413Z","avatar_url":"https://github.com/vtex.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Csv Parse\n\nGoal: Parse content of a csv file.\n\n## Example\n\nFrom:\n\n```\nAccount,Balance,Document,Document Type,Limit,Description,Email\nacc1,0,3i563784658,cpf,2000,,k@email.com\nacc2,10,3468723468,cpf,10000,Some text,j@email.com\n```\n\nTo:\n\n```\n[\n  {\n    account: \"acc1\",\n    balance: \"0\",\n    document: \"3i563784658\",\n    documentType: \"cpf\",\n    limit: \"2000\",\n    description: \"\",\n    email: \"k@gmail.com\"\n  },\n  {\n    account: \"acc2\",\n    balance: \"10\",\n    document: \"3468723468\",\n    documentType: \"cpf\",\n    limit: \"10000\",\n    description: \"Some text\",\n    email: \"j@email.com\"\n  }\n]\n```\n\nGiven the following keys:\n\n```\nconst keys = [\n  'account',\n  'balance',\n  'document',\n  'documentType',\n  'limit',\n  'description',\n  'email'\n]\n```\n\nInspiration: [paypal/downshift](https://github.com/paypal/downshift)\n\nDevelopment structure: [github.com/insin/nwb](https://github.com/insin/nwb)\n\n## Development\n\n| Action         | Command                       |\n| -------------- | ----------------------------- |\n| Install        | `npm i -g nwb \u0026 npm i`        |\n| Start          | `npm start`                   |\n| Build          | `nwb build`                   |\n| Local test     | `npm pack`                    |\n| Publish to npm | `npm publish --access public` |\n\n## Usage\n\n```\nnpm install @vtex/react-csv-parse --save\n```\n\n```js\nimport CsvParse from '@vtex/react-csv-parse'\n```\n\n```jsx\nhandleData = data =\u003e {\n  this.setState({ data })\n}\n```\n\n```jsx\nrender() {\n  const keys = [\n    \"header1\",\n    \"header2\",\n    \"header3\",\n    \"header4\",\n    \"header5\",\n  ]\n\n  return (\n    \u003cCsvParse\n      keys={keys}\n      onDataUploaded={this.handleData}\n      onError={this.handleError}\n      render={onChange =\u003e \u003cinput type=\"file\" onChange={onChange} /\u003e}\n    /\u003e\n  )\n}\n```\n\n`CsvParse` is the only component. It doesn't render anything itself, it just\ncalls the child function and renders that. Wrap everything in\n`\u003cCsvParse\u003e{/* your function here! */}\u003c/CsvParse\u003e`.\n\n## Props\n\n| Prop name        | Type  | Default | Required | Description                                                                    |\n| ---------------- | ----- | ------- | -------- | ------------------------------------------------------------------------------ |\n| `keys`           | array |         | true     | The keys used to create the objects.                                           |\n| `onDataUploaded` | func  |         | true     | Callback function with the data parsed as parameter.                           |\n| `onError`        | func  |         | false    | Callback function with the following data: `{ err, file, inputElem, reason }`. |\n\n### Data split rules\n\nBased on [Papaparse](https://github.com/mholt/PapaParse).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex%2Freact-csv-parse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex%2Freact-csv-parse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex%2Freact-csv-parse/lists"}