Need private packages and team management tools?Check out npm Teams »

@vtex/react-csv-parse

3.0.2 • Public • Published

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

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.

Install

npm i @vtex/react-csv-parse

DownloadsWeekly Downloads

965

Version

3.0.2

License

MIT

Unpacked Size

11.3 kB

Total Files

5

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar