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,,[email protected]
acc2,10,3468723468,cpf,10000,Some text,[email protected]
To:
[
{
account: "acc1",
balance: "0",
document: "3i563784658",
documentType: "cpf",
limit: "2000",
description: "",
email: "[email protected]"
},
{
account: "acc2",
balance: "10",
document: "3468723468",
documentType: "cpf",
limit: "10000",
description: "Some text",
email: "[email protected]"
}
]
Given the following keys:
const keys = [
'account',
'balance',
'document',
'documentType',
'limit',
'description',
'email'
]
Inspiration: paypal/downshift
Development structure: 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
import CsvParse from '@vtex/react-csv-parse'handleData = data => {
this.setState({ data })
}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.