Skip to content

Import data from a csv file to your app and your api.

License

Notifications You must be signed in to change notification settings

AGPatel/react-csv-parse

 
 

Repository files navigation

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.

About

Import data from a csv file to your app and your api.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%