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

📚 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

1import React, { CSSProperties } from 'react';
2
3import { useCSVReader } from 'react-papaparse';
4
5const styles = {
6  csvReader: {
7    display: 'flex',
8    flexDirection: 'row',
9    marginBottom: 10,
10  } as CSSProperties,
11  browseFile: {
12    width: '20%',
13  } as CSSProperties,
14  acceptedFile: {
15    border: '1px solid #ccc',
16    height: 45,
17    lineHeight: 2.5,
18    paddingLeft: 10,
19    width: '80%',
20  } as CSSProperties,
21  remove: {
22    borderRadius: 0,
23    padding: '0 20px',
24  } as CSSProperties,
25  progressBarBackgroundColor: {
26    backgroundColor: 'red',
27  } as CSSProperties,
28};
29
30export default function CSVReader() {
31  const { CSVReader } = useCSVReader();
32
33  return (
34    <CSVReader
35      onUploadAccepted={(results: any) => {
36        console.log('---------------------------');
37        console.log(results);
38        console.log('---------------------------');
39      }}
40    >
41      {({
42        getRootProps,
43        acceptedFile,
44        ProgressBar,
45        getRemoveFileProps,
46      }: any) => (
47        <>
48          <div style={styles.csvReader}>
49            <button type='button' {...getRootProps()} style={styles.browseFile}>
50              Browse file
51            </button>
52            <div style={styles.acceptedFile}>
53              {acceptedFile && acceptedFile.name}
54            </div>
55            <button {...getRemoveFileProps()} style={styles.remove}>
56              Remove
57            </button>
58          </div>
59          <ProgressBar style={styles.progressBarBackgroundColor} />
60        </>
61      )}
62    </CSVReader>
63  );
64}

Click and Drag Upload

1import React, { useState, CSSProperties } from 'react';
2
3import {
4  useCSVReader,
5  lightenDarkenColor,
6  formatFileSize,
7} from 'react-papaparse';
8
9const GREY = '#CCC';
10const GREY_LIGHT = 'rgba(255, 255, 255, 0.4)';
11const DEFAULT_REMOVE_HOVER_COLOR = '#A01919';
12const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
13  DEFAULT_REMOVE_HOVER_COLOR,
14  40
15);
16const GREY_DIM = '#686868';
17
18const styles = {
19  zone: {
20    alignItems: 'center',
21    border: `2px dashed ${GREY}`,
22    borderRadius: 20,
23    display: 'flex',
24    flexDirection: 'column',
25    height: '100%',
26    justifyContent: 'center',
27    padding: 20,
28  } as CSSProperties,
29  file: {
30    background: 'linear-gradient(to bottom, #EEE, #DDD)',
31    borderRadius: 20,
32    display: 'flex',
33    height: 120,
34    width: 120,
35    position: 'relative',
36    zIndex: 10,
37    flexDirection: 'column',
38    justifyContent: 'center',
39  } as CSSProperties,
40  info: {
41    alignItems: 'center',
42    display: 'flex',
43    flexDirection: 'column',
44    paddingLeft: 10,
45    paddingRight: 10,
46  } as CSSProperties,
47  size: {
48    backgroundColor: GREY_LIGHT,
49    borderRadius: 3,
50    marginBottom: '0.5em',
51    justifyContent: 'center',
52    display: 'flex',
53  } as CSSProperties,
54  name: {
55    backgroundColor: GREY_LIGHT,
56    borderRadius: 3,
57    fontSize: 12,
58    marginBottom: '0.5em',
59  } as CSSProperties,
60  progressBar: {
61    bottom: 14,
62    position: 'absolute',
63    width: '100%',
64    paddingLeft: 10,
65    paddingRight: 10,
66  } as CSSProperties,
67  zoneHover: {
68    borderColor: GREY_DIM,
69  } as CSSProperties,
70  default: {
71    borderColor: GREY,
72  } as CSSProperties,
73  remove: {
74    height: 23,
75    position: 'absolute',
76    right: 6,
77    top: 6,
78    width: 23,
79  } as CSSProperties,
80};
81
82export default function CSVReader() {
83  const { CSVReader } = useCSVReader();
84  const [zoneHover, setZoneHover] = useState(false);
85  const [removeHoverColor, setRemoveHoverColor] = useState(
86    DEFAULT_REMOVE_HOVER_COLOR
87  );
88
89  return (
90    <CSVReader
91      onUploadAccepted={(results: any) => {
92        console.log('---------------------------');
93        console.log(results);
94        console.log('---------------------------');
95        setZoneHover(false);
96      }}
97      onDragOver={(event: DragEvent) => {
98        event.preventDefault();
99        setZoneHover(true);
100      }}
101      onDragLeave={(event: DragEvent) => {
102        event.preventDefault();
103        setZoneHover(false);
104      }}
105    >
106      {({
107        getRootProps,
108        acceptedFile,
109        ProgressBar,
110        getRemoveFileProps,
111        Remove,
112      }: any) => (
113        <>
114          <div
115            {...getRootProps()}
116            style={Object.assign(
117              {},
118              styles.zone,
119              zoneHover && styles.zoneHover
120            )}
121          >
122            {acceptedFile ? (
123              <>
124                <div style={styles.file}>
125                  <div style={styles.info}>
126                    <span style={styles.size}>
127                      {formatFileSize(acceptedFile.size)}
128                    </span>
129                    <span style={styles.name}>{acceptedFile.name}</span>
130                  </div>
131                  <div style={styles.progressBar}>
132                    <ProgressBar />
133                  </div>
134                  <div
135                    {...getRemoveFileProps()}
136                    style={styles.remove}
137                    onMouseOver={(event: Event) => {
138                      event.preventDefault();
139                      setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
140                    }}
141                    onMouseOut={(event: Event) => {
142                      event.preventDefault();
143                      setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
144                    }}
145                  >
146                    <Remove color={removeHoverColor} />
147                  </div>
148                </div>
149              </>
150            ) : (
151              'Drop CSV file here or click to upload'
152            )}
153          </div>
154        </>
155      )}
156    </CSVReader>
157  );
158}

Drag ( No Click ) Upload

1import React, { useState, CSSProperties } from 'react';
2
3import {
4  useCSVReader,
5  lightenDarkenColor,
6  formatFileSize,
7} from 'react-papaparse';
8
9const GREY = '#CCC';
10const GREY_LIGHT = 'rgba(255, 255, 255, 0.4)';
11const DEFAULT_REMOVE_HOVER_COLOR = '#A01919';
12const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
13  DEFAULT_REMOVE_HOVER_COLOR,
14  40
15);
16const GREY_DIM = '#686868';
17
18const styles = {
19  zone: {
20    alignItems: 'center',
21    border: `2px dashed ${GREY}`,
22    borderRadius: 20,
23    display: 'flex',
24    flexDirection: 'column',
25    height: '100%',
26    justifyContent: 'center',
27    padding: 20,
28  } as CSSProperties,
29  file: {
30    background: 'linear-gradient(to bottom, #EEE, #DDD)',
31    borderRadius: 20,
32    display: 'flex',
33    height: 120,
34    width: 120,
35    position: 'relative',
36    zIndex: 10,
37    flexDirection: 'column',
38    justifyContent: 'center',
39  } as CSSProperties,
40  info: {
41    alignItems: 'center',
42    display: 'flex',
43    flexDirection: 'column',
44    paddingLeft: 10,
45    paddingRight: 10,
46  } as CSSProperties,
47  size: {
48    backgroundColor: GREY_LIGHT,
49    borderRadius: 3,
50    marginBottom: '0.5em',
51    justifyContent: 'center',
52    display: 'flex',
53  } as CSSProperties,
54  name: {
55    backgroundColor: GREY_LIGHT,
56    borderRadius: 3,
57    fontSize: 12,
58    marginBottom: '0.5em',
59  } as CSSProperties,
60  progressBar: {
61    bottom: 14,
62    position: 'absolute',
63    width: '100%',
64    paddingLeft: 10,
65    paddingRight: 10,
66  } as CSSProperties,
67  zoneHover: {
68    borderColor: GREY_DIM,
69  } as CSSProperties,
70  default: {
71    borderColor: GREY,
72  } as CSSProperties,
73  remove: {
74    height: 23,
75    position: 'absolute',
76    right: 6,
77    top: 6,
78    width: 23,
79  } as CSSProperties,
80};
81
82export default function CSVReader() {
83  const { CSVReader } = useCSVReader();
84  const [zoneHover, setZoneHover] = useState(false);
85  const [removeHoverColor, setRemoveHoverColor] = useState(
86    DEFAULT_REMOVE_HOVER_COLOR
87  );
88
89  return (
90    <CSVReader
91      onUploadAccepted={(results: any) => {
92        console.log('---------------------------');
93        console.log(results);
94        console.log('---------------------------');
95        setZoneHover(false);
96      }}
97      onDragOver={(event: DragEvent) => {
98        event.preventDefault();
99        setZoneHover(true);
100      }}
101      onDragLeave={(event: DragEvent) => {
102        event.preventDefault();
103        setZoneHover(false);
104      }}
105      noClick
106    >
107      {({
108        getRootProps,
109        acceptedFile,
110        ProgressBar,
111        getRemoveFileProps,
112        Remove,
113      }: any) => (
114        <>
115          <div
116            {...getRootProps()}
117            style={Object.assign(
118              {},
119              styles.zone,
120              zoneHover && styles.zoneHover
121            )}
122          >
123            {acceptedFile ? (
124              <>
125                <div style={styles.file}>
126                  <div style={styles.info}>
127                    <span style={styles.size}>
128                      {formatFileSize(acceptedFile.size)}
129                    </span>
130                    <span style={styles.name}>{acceptedFile.name}</span>
131                  </div>
132                  <div style={styles.progressBar}>
133                    <ProgressBar />
134                  </div>
135                  <div
136                    {...getRemoveFileProps()}
137                    style={styles.remove}
138                    onMouseOver={(event: Event) => {
139                      event.preventDefault();
140                      setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
141                    }}
142                    onMouseOut={(event: Event) => {
143                      event.preventDefault();
144                      setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
145                    }}
146                  >
147                    <Remove color={removeHoverColor} />
148                  </div>
149                </div>
150              </>
151            ) : (
152              'Drop CSV file here to upload'
153            )}
154          </div>
155        </>
156      )}
157    </CSVReader>
158  );
159}

Click ( No Drag ) Upload

1import React, { useState, CSSProperties } from 'react';
2
3import {
4  useCSVReader,
5  lightenDarkenColor,
6  formatFileSize,
7} from 'react-papaparse';
8
9const GREY = '#CCC';
10const GREY_LIGHT = 'rgba(255, 255, 255, 0.4)';
11const DEFAULT_REMOVE_HOVER_COLOR = '#A01919';
12const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
13  DEFAULT_REMOVE_HOVER_COLOR,
14  40
15);
16const GREY_DIM = '#686868';
17
18const styles = {
19  zone: {
20    alignItems: 'center',
21    border: `2px dashed ${GREY}`,
22    borderRadius: 20,
23    display: 'flex',
24    flexDirection: 'column',
25    height: '100%',
26    justifyContent: 'center',
27    padding: 20,
28  } as CSSProperties,
29  file: {
30    background: 'linear-gradient(to bottom, #EEE, #DDD)',
31    borderRadius: 20,
32    display: 'flex',
33    height: 120,
34    width: 120,
35    position: 'relative',
36    zIndex: 10,
37    flexDirection: 'column',
38    justifyContent: 'center',
39  } as CSSProperties,
40  info: {
41    alignItems: 'center',
42    display: 'flex',
43    flexDirection: 'column',
44    paddingLeft: 10,
45    paddingRight: 10,
46  } as CSSProperties,
47  size: {
48    backgroundColor: GREY_LIGHT,
49    borderRadius: 3,
50    marginBottom: '0.5em',
51    justifyContent: 'center',
52    display: 'flex',
53  } as CSSProperties,
54  name: {
55    backgroundColor: GREY_LIGHT,
56    borderRadius: 3,
57    fontSize: 12,
58    marginBottom: '0.5em',
59  } as CSSProperties,
60  progressBar: {
61    bottom: 14,
62    position: 'absolute',
63    width: '100%',
64    paddingLeft: 10,
65    paddingRight: 10,
66  } as CSSProperties,
67  zoneHover: {
68    borderColor: GREY_DIM,
69  } as CSSProperties,
70  default: {
71    borderColor: GREY,
72  } as CSSProperties,
73  remove: {
74    height: 23,
75    position: 'absolute',
76    right: 6,
77    top: 6,
78    width: 23,
79  } as CSSProperties,
80};
81
82export default function CSVReader() {
83  const { CSVReader } = useCSVReader();
84  const [zoneHover, setZoneHover] = useState(false);
85  const [removeHoverColor, setRemoveHoverColor] = useState(
86    DEFAULT_REMOVE_HOVER_COLOR
87  );
88
89  return (
90    <CSVReader
91      onUploadAccepted={(results: any) => {
92        console.log('---------------------------');
93        console.log(results);
94        console.log('---------------------------');
95        setZoneHover(false);
96      }}
97      onDragOver={(event: DragEvent) => {
98        event.preventDefault();
99        setZoneHover(true);
100      }}
101      onDragLeave={(event: DragEvent) => {
102        event.preventDefault();
103        setZoneHover(false);
104      }}
105      noDrag
106    >
107      {({
108        getRootProps,
109        acceptedFile,
110        ProgressBar,
111        getRemoveFileProps,
112        Remove,
113      }: any) => (
114        <>
115          <div
116            {...getRootProps()}
117            style={Object.assign(
118              {},
119              styles.zone,
120              zoneHover && styles.zoneHover
121            )}
122          >
123            {acceptedFile ? (
124              <>
125                <div style={styles.file}>
126                  <div style={styles.info}>
127                    <span style={styles.size}>
128                      {formatFileSize(acceptedFile.size)}
129                    </span>
130                    <span style={styles.name}>{acceptedFile.name}</span>
131                  </div>
132                  <div style={styles.progressBar}>
133                    <ProgressBar />
134                  </div>
135                  <div
136                    {...getRemoveFileProps()}
137                    style={styles.remove}
138                    onMouseOver={(event: Event) => {
139                      event.preventDefault();
140                      setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
141                    }}
142                    onMouseOut={(event: Event) => {
143                      event.preventDefault();
144                      setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
145                    }}
146                  >
147                    <Remove color={removeHoverColor} />
148                  </div>
149                </div>
150              </>
151            ) : (
152              'Click to upload'
153            )}
154          </div>
155        </>
156      )}
157    </CSVReader>
158  );
159}

🎀 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

1import React from 'react';
2
3import { useCSVDownloader } from 'react-papaparse';
4
5export default function CSVDownloader() {
6  const { CSVDownloader, Type } = useCSVDownloader();
7
8  return (
9    <CSVDownloader
10      type={Type.Button}
11      filename={'filename'}
12      bom={true}
13      config={{
14        delimiter: ';',
15      }}
16      data={[
17        {
18          'Column 1': '1-1',
19          'Column 2': '1-2',
20          'Column 3': '1-3',
21          'Column 4': '1-4',
22        },
23        {
24          'Column 1': '2-1',
25          'Column 2': '2-2',
26          'Column 3': '2-3',
27          'Column 4': '2-4',
28        },
29        {
30          'Column 1': '3-1',
31          'Column 2': '3-2',
32          'Column 3': '3-3',
33          'Column 4': '3-4',
34        },
35        {
36          'Column 1': 4,
37          'Column 2': 5,
38          'Column 3': 6,
39          'Column 4': 7,
40        },
41      ]}
42    >
43      Download
44    </CSVDownloader>
45  );
46}

Link

1import React from 'react';
2
3import { useCSVDownloader } from 'react-papaparse';
4
5export default function CSVDownloader() {
6  const { CSVDownloader, Type } = useCSVDownloader();
7
8  return (
9    <CSVDownloader
10      type={Type.Link}
11      filename={'filename'}
12      bom={true}
13      data={`Column 1,Column 2,Column 3,Column 4
141-1,1-2,1-3,1-4
15#2-1,मुकेश,ខ្ញុំ,2-4
163-1,3-2,អ្នក,3-4
174,5,6,7`}
18    >
19      Download
20    </CSVDownloader>
21  );
22}

Data as a Function/Callback

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

1import React from 'react';
2
3import { useCSVDownloader } from 'react-papaparse';
4
5export default function CSVDownloader() {
6  const { CSVDownloader } = useCSVDownloader();
7
8  return (
9    <CSVDownloader
10      filename={'filename'}
11      data={() => {
12        return [
13          {
14            "Column 1": "1-1",
15            "Column 2": "1-2",
16            "Column 3": "1-3",
17            "Column 4": "1-4",
18          }
19        ]}
20      }
21    >
22      Download
23    </CSVDownloader>
24  );
25}

🎀 readString

1import React from 'react';
2
3import { usePapaParse } from 'react-papaparse';
4
5export default function ReadString() {
6  const { readString } = usePapaParse();
7
8  const handleReadString = () => {
9    const csvString = `Column 1,Column 2,Column 3,Column 4
101-1,1-2,1-3,1-4
112-1,2-2,2-3,2-4
123-1,3-2,3-3,3-4
134,5,6,7`;
14
15    readString(csvString, {
16      worker: true,
17      complete: (results) => {
18        console.log('---------------------------');
19        console.log(results);
20        console.log('---------------------------');
21      },
22    });
23  };
24
25  return <button onClick={() => handleReadString()}>readString</button>;
26}

🎀 readRemoteFile

1import React from 'react';
2
3import { usePapaParse } from 'react-papaparse';
4
5export default function ReadRemoteFile() {
6  const { readRemoteFile } = usePapaParse();
7
8  const handleReadRemoteFile = () => {
9    readRemoteFile(url, {
10      complete: (results) => {
11        console.log('---------------------------');
12        console.log('Results:', results);
13        console.log('---------------------------');
14      },
15    });
16  };
17
18  return <button onClick={() => handleReadRemoteFile()}>readRemoteFile</button>;
19}

🎀 jsonToCSV

1import React from 'react';
2
3import { usePapaParse } from 'react-papaparse';
4
5export default function JsonToCSV() {
6  const { jsonToCSV } = usePapaParse();
7
8  const handleJsonToCSV = () => {
9    const jsonData = `[
10      {
11          "Column 1": "1-1",
12          "Column 2": "1-2",
13          "Column 3": "1-3",
14          "Column 4": "1-4"
15      },
16      {
17          "Column 1": "2-1",
18          "Column 2": "2-2",
19          "Column 3": "2-3",
20          "Column 4": "2-4"
21      },
22      {
23          "Column 1": "3-1",
24          "Column 2": "3-2",
25          "Column 3": "3-3",
26          "Column 4": "3-4"
27      },
28      {
29          "Column 1": 4,
30          "Column 2": 5,
31          "Column 3": 6,
32          "Column 4": 7
33      }
34    ]`;
35    const results = jsonToCSV(jsonData);
36    console.log('---------------------------');
37    console.log('Results:', results);
38    console.log('---------------------------');
39  };
40
41  return <button onClick={() => handleJsonToCSV()}>jsonToCSV</button>;
42}

Header Row Support

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

1import { usePapaParse } from 'react-papaparse';
2
3const { readString } = usePapaParse();
4
5readString(csvString, {
6  header: true,
7  worker: true,
8  complete: (results) => {
9    console.log('---------------------------');
10    console.log(results);
11    console.log('---------------------------');
12  },
13});

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.

1import { usePapaParse } from 'react-papaparse';
2
3const { readRemoteFile } = usePapaParse();
4
5readRemoteFile(url, {
6  step: (row) => {
7    console.log('Row:', row.data);
8  },
9  complete: () => {
10    console.log('All done!');
11  }
12});

📜 Changelog

Latest version 4.0.2 (2022-01-26):

• Fix onUploadAccepted signature when a preview is set

Version 4.0.1 (2022-01-21):

• Fix config props does not work in CSVReader

Version 4.0.0 (2022-01-18):

• Improve code performance
• Rewrite any existing based components to hooks

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

🛣️ Roadmap

🆕 v4.1.x

• 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	Michiel De Mey

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