@vtex/react-csv-parse

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,,[e-mail]
acc2,10,3468723468,cpf,10000,Some text,[e-mail]

To:

[
  {
    account: "acc1",
    balance: "0",
    document: "3i563784658",
    documentType: "cpf",
    limit: "2000",
    description: "",
    email: "[e-mail]"
  },
  {
    account: "acc2",
    balance: "10",
    document: "3468723468",
    documentType: "cpf",
    limit: "10000",
    description: "Some text",
    email: "[e-mail]"
  }
]

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.