react-csv-parse React component
npm install @vtex/react-csv-parseGoal: Parse content of a csv file.
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
Development structure: github.com/insin/nwb
| Action | Command |
| -------------- | ----------------------------- |
| Install | npm i -g nwb & npm i |npm start
| Start | |nwb build
| Build | |npm pack
| Local test | |npm publish --access public
| Publish to npm | |
``
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 (
onDataUploaded={this.handleData}
onError={this.handleError}
render={onChange => }
/>
)
}
`
CsvParse is the only component. It doesn't render anything itself, it just
calls the child function and renders that. Wrap everything in.
| 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 }`. |
Based on Papaparse.