# @vtex/react-csv-parse

> react-csv-parse React component

Latest version **3.0.2** (published 2018-06-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vtex/react-csv-parse
pnpm add @vtex/react-csv-parse
yarn add @vtex/react-csv-parse
bun add @vtex/react-csv-parse
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2018-06-07 |
| First published | 2017-10-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 11 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 43 |
| Maintainers | afonsopraca, alinevillaca, amoreira, analuizamtg, arturpimentel, augustob, breno, brunohq, brunojdo, cmdalbem, firstdoit, gabrielgodoy, guigs, guilhermebruzzi, iago, kevinchevallier, lbebber, leticia, luizerasmo, marcelo.tokarnia, mark.matern, matheuscosta, nandoacoelho, ntmedina, tlgimenes, victorges, vtexlab |
| Keywords | react-component |

## Links

- npm: https://www.npmjs.com/package/@vtex/react-csv-parse
- Repository: https://github.com/vtex/react-csv-parse
- Homepage: https://github.com/vtex/react-csv-parse#readme
- Issues: https://github.com/vtex/react-csv-parse/issues
- npm.io page: https://npm.io/package/@vtex/react-csv-parse

## Dependencies (2)

- [ramda](https://npm.io/package/ramda.md) ^0.25.0
- [papaparse](https://npm.io/package/papaparse.md) ^4.5.0

## Recent versions

- 3.0.2 (latest) — 2018-06-07
- 3.0.1 — 2018-06-07
- 3.0.0 — 2018-06-07
- 2.0.0-beta.1 — 2018-02-08
- 1.1.1 — 2018-02-07
- 1.1.0 — 2018-02-07
- 1.0.3-beta.3 — 2017-10-27
- 1.0.3-beta.2 — 2017-10-27
- 1.0.3-beta.1 — 2017-10-27

## README

# React Csv Parse

Goal: Parse content of a csv file.

## Example

From:

```
Account,Balance,Document,Document Type,Limit,Description,Email
acc1,0,3i563784658,cpf,2000,,k@email.com
acc2,10,3468723468,cpf,10000,Some text,j@email.com
```

To:

```
[
  {
    account: "acc1",
    balance: "0",
    document: "3i563784658",
    documentType: "cpf",
    limit: "2000",
    description: "",
    email: "k@gmail.com"
  },
  {
    account: "acc2",
    balance: "10",
    document: "3468723468",
    documentType: "cpf",
    limit: "10000",
    description: "Some text",
    email: "j@email.com"
  }
]
```

Given the following keys:

```
const keys = [
  'account',
  'balance',
  'document',
  'documentType',
  'limit',
  'description',
  'email'
]
```

Inspiration: [paypal/downshift](https://github.com/paypal/downshift)

Development structure: [github.com/insin/nwb](https://github.com/insin/nwb)

## Development

| Action         | Command                       |
| -------------- | ----------------------------- |
| Install        | `npm i -g nwb & npm i`        |
| Start          | `npm start`                   |
| Build          | `nwb build`                   |
| Local test     | `npm pack`                    |
| Publish to npm | `npm publish --access public` |

## Usage

```
npm install @vtex/react-csv-parse --save
```

```js
import CsvParse from '@vtex/react-csv-parse'
```

```jsx
handleData = data => {
  this.setState({ data })
}
```

```jsx
render() {
  const keys = [
    "header1",
    "header2",
    "header3",
    "header4",
    "header5",
  ]

  return (
    <CsvParse
      keys={keys}
      onDataUploaded={this.handleData}
      onError={this.handleError}
      render={onChange => <input type="file" onChange={onChange} />}
    />
  )
}
```

`CsvParse` is the only component. It doesn't render anything itself, it just
calls the child function and renders that. Wrap everything in
`<CsvParse>{/* your function here! */}</CsvParse>`.

## Props

| Prop name        | Type  | Default | Required | Description                                                                    |
| ---------------- | ----- | ------- | -------- | ------------------------------------------------------------------------------ |
| `keys`           | array |         | true     | The keys used to create the objects.                                           |
| `onDataUploaded` | func  |         | true     | Callback function with the data parsed as parameter.                           |
| `onError`        | func  |         | false    | Callback function with the following data: `{ err, file, inputElem, reason }`. |

### Data split rules

Based on [Papaparse](https://github.com/mholt/PapaParse).

---
_Source: https://npm.io/package/@vtex/react-csv-parse · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._