Package Exports

react-papaparse

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-papaparse) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-papaparse

react-papaparse is the fastest in-browser CSV (or delimited text) parser for React.

🎁 Features

Easy to use
Fast mode by default
Stream large files
Reverse parsing (converts JSON to CSV)
Auto-detect delimiter
Worker threads to keep your web page reactive
Header row support
Pause, resume, abort
Can convert numbers and booleans to their types
One of the only parsers that correctly handles line-breaks and quotations
Integration to get files from <input type="file"> using inputRef

🔧 Install

react-papaparse is available on npm. It can be installed with the following command:

npm install --save react-papaparse

react-papaparse is available on yarn as well. It can be installed with the following command:

yarn add react-papaparse

📖 Homepage & Demo

To learn how to use react-papaparse:

Documentation

📚 Functions & Component Document

💡 Usage

🎀 readString

import { readString } from 'react-papaparse'

const str: `Column 1,Column 2,Column 3,Column 4
1-1,1-2,1-3,1-4
2-1,2-2,2-3,2-4
3-1,3-2,3-3,3-4
4,5,6,7`

var results = readString(str)

🎀 jsonToCSV

import { jsonToCSV } from 'react-papaparse'

const jsonData: `[
  {
      "Column 1": "1-1",
      "Column 2": "1-2",
      "Column 3": "1-3",
      "Column 4": "1-4"
  },
  {
      "Column 1": "2-1",
      "Column 2": "2-2",
      "Column 3": "2-3",
      "Column 4": "2-4"
  },
  {
      "Column 1": "3-1",
      "Column 2": "3-2",
      "Column 3": "3-3",
      "Column 4": "3-4"
  },
  {
      "Column 1": 4,
      "Column 2": 5,
      "Column 3": 6,
      "Column 4": 7
  }
]`

var results = jsonToCSV(jsonData)

🎀 CSVReader

import React, { Component } from 'react'

import { CSVReader } from 'react-papaparse'

class App extends Component {
  constructor(props) {
    super(props)
    this.fileInput = React.createRef()
  }

  handleReadCSV = (data) => {
    console.log(data)
  }

  handleOnError = (err, file, inputElem, reason) => {
    console.log(err)
  }

  handleImportOffer = () => {
    this.fileInput.current.click()
  }

  render() {
    return (
      <>
        <CSVReader
          onFileLoaded={this.handleReadCSV}
          inputRef={this.fileInput}
          style={{display: 'none'}}
          onError={this.handleOnError}
        />
        <button onClick={this.handleImportOffer}>Import</button>
      </>
    )
  }
}

export default App

Header row support

If you tell react-papaparse there is a header row, each row will be organized by field name instead of index.

<CSVReader
  onFileLoaded={this.handleReadCSV}
  inputRef={this.fileInput}
  style={{display: 'none'}}
  onError={this.handleOnError}
  configOptions={{header: true /* Header row support */ }}
/>

Stream

That's what streaming is for. Specify a step callback to receive the results row-by-row. This way, you won't load the whole file into memory and crash the browser.

<CSVReader
  inputRef={this.fileInput}
  style={{display: 'none'}}
  onError={this.handleOnError}
  configOptions={{
    header: true,
    step: function(row) { /* Stream */
      console.log("Row:", row.data)
    },
  }}
/>

💖 Wrap Up

If you think any of the react-papaparse can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.

🌟 Contribution

We'd love to have your helping hand on contributions to react-papaparse by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

How to contribute:

Open pull request with improvements
Discuss ideas in issues
Spread the word
Reach out with any feedback

⚖️ License

The MIT License