sotabkw/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.

⭐️ Please support us by giving a star! Thanks! ⭐️

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.

🎁 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:

• How to customize CSVReader (Drag to upload) style?
• How to reset CSVReader?
• Sample of using CSVReader isSet

📚 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

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

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

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

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 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`

const results = readString(str)

🎀 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.

const results = readString(csvString {
  header: true
})

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.17.0 (2021-07-24):

• Add ability for data={} to be a function in CSVDownloader

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

👨‍👩‍👦 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.

⚖️ License

The MIT License