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. It is full of useful features such as CSVReader, CSVDownloader, readString, jsonToCSV, readRemoteFile, ... etc.

npm bundle size

🎁 Features

Compatible with both JavaScript and TypeScript
Easy to use
Parse CSV files directly (local or over the network)
Fast mode (is really fast)
Stream large files (even via HTTP)
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

🔧 Install

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

npm install react-papaparse --save

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

yarn add react-papaparse --save

📖 Demo & Documentation

Demo

To learn how to use react-papaparse:

Documentation

FAQ:

📚 Useful Features

CSVReader – React component that handles csv files input and returns its content as array.
CSVDownloader – React component that render the link/button which is clicked to download the data provided in CSV format.
readString – The function that read CSV comma separated string and returns its content as array.
readRemoteFile – The function that read remote CSV files and returns its content as array.
jsonToCSV – The function that read an array of object (json) and returns its content as CSV comma separated string.

💡 Usage

🎀 CSVReader

Basic Upload

basic-upload

import React, { Component } from 'react'

import { CSVReader } from 'react-papaparse'

const buttonRef = React.createRef()

export default class CSVReader extends Component {
  handleOpenDialog = (e) => {
    // Note that the ref is set async, so it might be null at some point
    if (buttonRef.current) {
      buttonRef.current.open(e)
    }
  }

  handleOnFileLoad = (data) => {
    console.log('---------------------------')
    console.log(data)
    console.log('---------------------------')
  }

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

  handleOnRemoveFile = (data) => {
    console.log('---------------------------')
    console.log(data)
    console.log('---------------------------')
  }

  handleRemoveFile = (e) => {
    // Note that the ref is set async, so it might be null at some point
    if (buttonRef.current) {
      buttonRef.current.removeFile(e)
    }
  }

  render() {
    return (
      <CSVReader
        ref={buttonRef}
        onFileLoad={this.handleOnFileLoad}
        onError={this.handleOnError}
        noClick
        noDrag
        onRemoveFile={this.handleOnRemoveFile}
      >
        {({ file }) => (
          <aside
            style={{
              display: 'flex',
              flexDirection: 'row',
              marginBottom: 10
            }}
          >
            <button
              type='button'
              onClick={this.handleOpenDialog}
              style={{
                borderRadius: 0,
                marginLeft: 0,
                marginRight: 0,
                width: '40%',
                paddingLeft: 0,
                paddingRight: 0
              }}
            >
              Browse file
            </button>
            <div
              style={{
                borderWidth: 1,
                borderStyle: 'solid',
                borderColor: '#ccc',
                height: 45,
                lineHeight: 2.5,
                marginTop: 5,
                marginBottom: 5,
                paddingLeft: 13,
                paddingTop: 3,
                width: '60%'
              }}
            >
              {file && file.name}
            </div>
            <button
              style={{
                borderRadius: 0,
                marginLeft: 0,
                marginRight: 0,
                paddingLeft: 20,
                paddingRight: 20
              }}
              onClick={this.handleRemoveFile}
            >
              Remove
            </button>
          </aside>
        )}
      </CSVReader>
    )
  }
}

Click and Drag Upload

click-and-drag-upload

import React, { Component } from 'react'

import { CSVReader } from 'react-papaparse'

export default class CSVReader extends Component {
  handleOnDrop = (data) => {
    console.log('---------------------------')
    console.log(data)
    console.log('---------------------------')
  }

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

  handleOnRemoveFile = (data) => {
    console.log('---------------------------')
    console.log(data)
    console.log('---------------------------')
  }

  render() {
    return (
      <CSVReader
        onDrop={this.handleOnDrop}
        onError={this.handleOnError}
        addRemoveButton
        removeButtonColor='#659cef'
        onRemoveFile={this.handleOnRemoveFile}
      >
        <span>Drop CSV file here or click to upload.</span>
      </CSVReader>
    )
  }
}

Drag ( No Click ) Upload

drag-no-click-upload

import React, { Component } from 'react'

import { CSVReader } from 'react-papaparse'

export default class CSVReader extends Component {
  handleOnDrop = (data) => {
    console.log('---------------------------')
    console.log(data)
    console.log('---------------------------')
  }

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

  handleOnRemoveFile = (data) => {
    console.log('---------------------------')
    console.log(data)
    console.log('---------------------------')
  }

  render() {
    return (
      <CSVReader
        onDrop={this.handleOnDrop}
        onError={this.handleOnError}
        noClick
        addRemoveButton
        onRemoveFile={this.handleOnRemoveFile}
      >
        <span>Drop CSV file here to upload.</span>
      </CSVReader>
    )
  }
}

Click ( No Drag ) Upload

click-no-drag-upload

import React, { Component } from 'react'

import { CSVReader } from 'react-papaparse'

export default class CSVReader extends Component {
  handleOnDrop = (data) => {
    console.log('---------------------------')
    console.log(data)
    console.log('---------------------------')
  }

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

  handleOnRemoveFile = (data) => {
    console.log('---------------------------')
    console.log(data)
    console.log('---------------------------')
  }

  render() {
    return (
      <CSVReader
        onDrop={this.handleOnDrop}
        onError={this.handleOnError}
        noDrag
        addRemoveButton
        onRemoveFile={this.handleOnRemoveFile}
      >
        <span>Click to upload.</span>
      </CSVReader>
    )
  }
}

🎀 CSVDownloader

Just pass in the js object with an optional configuration ( setting delimiter / separator ).

Note: If you want to open your CSV files in Excel, you might want to set bom={true} or bom, default is false. This option adds the so called BOM byte '\ufeff' to the beginning of your CSV files and tells Excel that the encoding is UTF8.

Button

import React, { Component } from 'react'

import { CSVDownloader } from 'react-papaparse'

export default class CSVDownloader extends Component {
  render() {
    return (
      <CSVDownloader
        data={[
          {
            "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,
          },
        ]}
        type="button"
        filename={'filename'}
        bom={true}
      >
        Download
      </CSVDownloader>
    )
  }
}

Link

import React, { Component } from 'react'

import { CSVDownloader } from 'react-papaparse'

export default class CSVDownloader extends Component {
  render() {
    return (
      <CSVDownloader
        data={`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`}
        filename={'filename'}
        type={'link'}
      >
        Download
      </CSVDownloader>
    )
  }
}

Data as a Function/Callback

data={} can be a function that returns a data object.

<CSVDownloader
  filename={'filename'}
  data={() => {
    return [
      {
        "Column 1": "1-1",
        "Column 2": "1-2",
        "Column 3": "1-3",
        "Column 4": "1-4",
      }
    ]}
  }
>
  Download
</CSVDownloader>

🎀 readString

import { readString } from 'react-papaparse'

const csvString = `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`

readString(csvString, {
  worker: true,
  complete: (results) => {
    console.log(results)
  }
})

🎀 readRemoteFile

import { readRemoteFile } from 'react-papaparse'

readRemoteFile(
  url,
  {
    complete: (results) => {
      console.log('Results:', results)
    }
  }
)

🎀 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
  }
]`

const results = jsonToCSV(jsonData)

Header row support

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

readString(csvString, {
  header: true,
  worker: true,
  complete: (results) => {
    console.log(results)
  }
})

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.

readRemoteFile('http://example.com/big.csv', {
  step: (row) => {
    console.log('Row:', row.data)
  },
  complete: () => {
    console.log('All done!')
  }
})

📜 Changelog

Latest version 3.18.1 (2021-11-07):

Fix a bug when component is unmounted immediately after file load in CSVReader

Details changes for each release are documented in the CHANGELOG.md.

🛣️ Roadmap

🆕 v4.0.x

Improve code performance
Rewrite any existing based components to hooks
CSVReader multiple files drag and drop

❗ Issues

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

🏆 Contributors

_Bunlong	_{Tim Tutt}	_{Pieter Kuppens}	_{Jack Zhao}	_{Pablo Menichini}	_{Mystical Tech}
_Bruno	_{Samuel Hulla}	_glinkot	_{Paul Leavitt}	_Gabriel	_Izaak
_Oliver	_{Ole Skaar}	_Des	_Karl	_Max	_Kostas
_Dalitzky	_{John Quinlivan}	_{Gareth Jones}	_{Chrys Exaucet}	_Stefee	_{Christopher Thomas}
_{Venelin Banov}	_{Joey Baker}

👨‍👩‍👦 Advertisement

You maybe interested.

React Patterns – React patterns & techniques to use in development for React Developer.
React Patterns Blog – The latest React news and articles.
Next Share – Social media share buttons for your next React apps.

⚖️ License

The MIT License