Documentation

Convert CSV to JSON

Delimited data can be parsed out of strings or files. Files that are parsed can be local. Local files are used with CSVReader component.

Parse string

readString(csvString[, config])

• csvString is a string of delimited text to be parsed.
• config is an config object.
• Returns a parse results object in complete of config object (if not streaming or using worker).

Parse local files

Basic Upload

<CSVReader
  onUploadAccepted={(results: any) => {
    console.log('---------------------------');
    console.log(results);
    console.log('---------------------------');
  }}
>
  {({
    getRootProps,
    acceptedFile,
    ProgressBar,
    getRemoveFileProps,
  }: any) => (
    <>
      <div style={styles.csvReader}>
        <button type='button' {...getRootProps()} style={styles.browseFile}>
          Browse file
        </button>
        <div style={styles.acceptedFile}>
          {acceptedFile && acceptedFile.name}
        </div>
        <button {...getRemoveFileProps()} style={styles.remove}>
          Remove
        </button>
      </div>
      <ProgressBar style={styles.progressBarBackgroundColor} />
    </>
  )}
</CSVReader>

• acceptis a property to be used to set MIME type for CSV. Default is 'text/csv, .csv, application/vnd.ms-excel'.
• onUploadAccepted is the function to be called passing uploaded results.
• noClick If true, disables click to open the native file selection dialog.
• config is a config object which contains a callback.

Click and Drag Upload

<CSVReader
  onUploadAccepted={(results: any) => {
    console.log('---------------------------');
    console.log(results);
    console.log('---------------------------');
    setZoneHover(false);
  }}
  onDragOver={(event: DragEvent) => {
    event.preventDefault();
    setZoneHover(true);
  }}
  onDragLeave={(event: DragEvent) => {
    event.preventDefault();
    setZoneHover(false);
  }}
>
  {({
    getRootProps,
    acceptedFile,
    ProgressBar,
    getRemoveFileProps,
    Remove,
  }: any) => (
    <>
      <div
        {...getRootProps()}
        style={Object.assign(
          {},
          styles.zone,
          zoneHover && styles.zoneHover
        )}
      >
        {acceptedFile ? (
          <>
            <div style={styles.file}>
              <div style={styles.info}>
                <span style={styles.size}>
                  {formatFileSize(acceptedFile.size)}
                </span>
                <span style={styles.name}>{acceptedFile.name}</span>
              </div>
              <div style={styles.progressBar}>
                <ProgressBar />
              </div>
              <div
                {...getRemoveFileProps()}
                style={styles.remove}
                onMouseOver={(event: Event) => {
                  event.preventDefault();
                  setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                }}
                onMouseOut={(event: Event) => {
                  event.preventDefault();
                  setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                }}
              >
                <Remove color={removeHoverColor} />
              </div>
            </div>
          </>
        ) : (
          'Drop CSV file here or click to upload'
        )}
      </div>
    </>
  )}
</CSVReader>

• acceptis a property to be used to set MIME type for CSV. Default is 'text/csv, .csv, application/vnd.ms-excel'.
• onUploadAccepted is the function to be called passing uploaded results.
• config is a config object which contains a callback.

Drag ( No Click ) Upload

<CSVReader
  onUploadAccepted={(results: any) => {
    console.log('---------------------------');
    console.log(results);
    console.log('---------------------------');
    setZoneHover(false);
  }}
  onDragOver={(event: DragEvent) => {
    event.preventDefault();
    setZoneHover(true);
  }}
  onDragLeave={(event: DragEvent) => {
    event.preventDefault();
    setZoneHover(false);
  }}
  noClick
>
  {({
    getRootProps,
    acceptedFile,
    ProgressBar,
    getRemoveFileProps,
    Remove,
  }: any) => (
    <>
      <div
        {...getRootProps()}
        style={Object.assign(
          {},
          styles.zone,
          zoneHover && styles.zoneHover
        )}
      >
        {acceptedFile ? (
          <>
            <div style={styles.file}>
              <div style={styles.info}>
                <span style={styles.size}>
                  {formatFileSize(acceptedFile.size)}
                </span>
                <span style={styles.name}>{acceptedFile.name}</span>
              </div>
              <div style={styles.progressBar}>
                <ProgressBar />
              </div>
              <div
                {...getRemoveFileProps()}
                style={styles.remove}
                onMouseOver={(event: Event) => {
                  event.preventDefault();
                  setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                }}
                onMouseOut={(event: Event) => {
                  event.preventDefault();
                  setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                }}
              >
                <Remove color={removeHoverColor} />
              </div>
            </div>
          </>
        ) : (
          'Drop CSV file here to upload'
        )}
      </div>
    </>
  )}
</CSVReader>

• acceptis a property to be used to set MIME type for CSV. Default is 'text/csv, .csv, application/vnd.ms-excel'.
• onUploadAccepted is the function to be called passing uploaded results.
• noClick If true, disables click to open the native file selection dialog.
• config is a config object which contains a callback.

Click ( No Drag ) Upload

<CSVReader
  onUploadAccepted={(results: any) => {
    console.log('---------------------------');
    console.log(results);
    console.log('---------------------------');
    setZoneHover(false);
  }}
  onDragOver={(event: DragEvent) => {
    event.preventDefault();
    setZoneHover(true);
  }}
  onDragLeave={(event: DragEvent) => {
    event.preventDefault();
    setZoneHover(false);
  }}
  noDrag
>
  {({
    getRootProps,
    acceptedFile,
    ProgressBar,
    getRemoveFileProps,
    Remove,
  }: any) => (
    <>
      <div
        {...getRootProps()}
        style={Object.assign(
          {},
          styles.zone,
          zoneHover && styles.zoneHover
        )}
      >
        {acceptedFile ? (
          <>
            <div style={styles.file}>
              <div style={styles.info}>
                <span style={styles.size}>
                  {formatFileSize(acceptedFile.size)}
                </span>
                <span style={styles.name}>{acceptedFile.name}</span>
              </div>
              <div style={styles.progressBar}>
                <ProgressBar />
              </div>
              <div
                {...getRemoveFileProps()}
                style={styles.remove}
                onMouseOver={(event: Event) => {
                  event.preventDefault();
                  setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                }}
                onMouseOut={(event: Event) => {
                  event.preventDefault();
                  setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                }}
              >
                <Remove color={removeHoverColor} />
              </div>
            </div>
          </>
        ) : (
          'Click to upload'
        )}
      </div>
    </>
  )}
</CSVReader>

• acceptis a property to be used to set MIME type for CSV. Default is 'text/csv, .csv, application/vnd.ms-excel'.
• onUploadAccepted is the function to be called passing uploaded results.
• noDrag If true, disables drag 'n' drop.
• config is a config object which contains a callback.

Parse remote file

readRemoteFile(url, {
  // rest of config ...
})

• url is the path or URL to the file to download.
• The second argument is a config object.
• Doesn't return anything. Results are provided asynchronously to a callback function.

Convert JSON to CSV

react-papaparse unparse utility writes out correct delimited text strings given an array of arrays or an array of objects using jsonToCSV() function.

jsonToCSV(jsonData[, config])

• Returns the resulting delimited text as a string.
• data can be one of:
  • An array of arrays
  • An array of objects
  • An object explicitly defining fields and data
• config is an optional config object

Default Unparse Config with all options

Unparse Config

Examples

// Two-line, comma-delimited file
const csv = jsonToCSV([
  ["1-1", "1-2", "1-3"],
  ["2-1", "2-2", "2-3"]
])

// With implicit header row
// (keys of first object populate header row)
const csv = jsonToCSV([
  {
    "Column 1": "foo",
    "Column 2": "bar"
  },
  {
    "Column 1": "abc",
    "Column 2": "def"
  }
])

// Specifying fields and data explicitly
const csv = jsonToCSV({
  "fields": ["Column 1", "Column 2"],
  "data": [
    ["foo", "bar"],
    ["abc", "def"]
  ]
})

The Parse Config Object

The readString function and CSVReader component may be passed a configuration object. It defines settings, behavior, and callbacks used during parsing. Any properties left unspecified will resort to their default values.

Warning

Setting the complete callback function on the config object will disable the onDrop and/or onFileLoad functions you pass to the CSVReader component.

Setting the step callback function on the config object will disable the onDrop and/or onFileLoad functions you pass to the CSVReader component and will disable the progress bar.

Default Config With All Options

Config

The Parse Result Object

A parse result always contains three objects: data, errors, and meta. Data and errors are arrays, and meta is an object. In the step callback, the data array will only contain one element.

Result Structure

{
  data:   // array of parsed data
  errors: // array of errors
  meta:   // object with extra info
}

• data is an array of rows. If header is false, rows are arrays; otherwise they are objects of data keyed by the field name.
• errors is an array of errors.
• meta contains extra information about the parse, such as delimiter used, the newline sequence, whether the process was aborted, etc. Properties in this object are not guaranteed to exist in all situations.

Data

// Example (header: false)
[
  ["Column 1", "Column 2"],
  ["foo", "bar"],
  ["abc", "def"]
]

// Example (header: true)
[
  {
    "Column 1": "foo",
    "Column 2": "bar"
  },
  {
    "Column 1": "abc",
    "Column 2": "def"
  }
]

• If header row is enabled and more fields are found on a row of data than in the header row, an extra field will appear in that row called __parsed_extra. It contains an array of all data parsed from that row that extended beyond the header row.

Errors

// Error structure
{
  type: "",     // A generalization of the error
  code: "",     // Standardized error code
  message: "",  // Human-readable details
  row: 0,       // Row index of parsed data where error is
}

• The error type will be one of "Quotes", "Delimiter", or "FieldMismatch".
• The code may be "MissingQuotes", "UndetectableDelimiter", "TooFewFields", or "TooManyFields" (depending on the error type).
• Just because errors are generated does not necessarily mean that parsing failed. The worst error you can get is probably MissingQuotes.

Meta

{
  delimiter: // Delimiter used
  linebreak: // Line break sequence used
  aborted:   // Whether process was aborted
  fields:    // Array of field names
  truncated: // Whether preview consumed all input
}

• Not all meta properties will always be available. For instance, fields is only given when header row is enabled.

Extras

There's a few other things that react-papaparse exposes to you that weren't explained above.

Read-Only

Configurable

CSVDownloader

Allow to download CSV file from js object.

<CSVDownloader
  type={Type.Button}
  filename={'filename'}
  bom={true}
  config={
    {
      delimiter: ';',
    }
  }
  data={[
    {
      "Column 1": "1-1",
      "Column 2": "1-2",
      "Column 3": "1-3",
      "Column 4": "1-4",
    },
  ]}
>
  Download
</CSVDownloader>

• bom is used to indicate Unicode encoding of a text file. If true, indicate Unicode encoding of a text file.
• type If "button", render button.
• config is a config object which contains a 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>