⭐️ Please support us by giving a star! Thanks! ⭐️
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.
- 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
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
To learn how to use react-papaparse:
FAQ:
- How to customize CSVReader (Drag to upload) style?
- How to reset CSVReader?
- Sample of using CSVReader isSet
- 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.
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>
)
}
}
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>
)
}
}
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>
)
}
}
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>
)
}
}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.
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>
)
}
}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={} 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>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)import { readRemoteFile } from 'react-papaparse'
readRemoteFile(
url,
{
complete: (results) => {
console.log('Results:', results)
}
}
)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)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
})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!')
}
})Latest version 3.17.2 (2021-09-04):
- Upgrade dependencies
Details changes for each release are documented in the CHANGELOG.md.
- Improve code performance
- Rewrite any existing based components to hooks
- CSVReader multiple files drag and drop
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.
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
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.
The MIT License
