react-native-csv

The powerful, React Native CSV parser for big boys and girls

  Install  Documentation
// Parse CSV string
const data = readString(csvString)

// Convert back to CSV
const csv = jsonToCSV(jsonData)

// Stream big file in worker thread
readRemoteFile(bigFileURL, {
  worker: true,
  step: (results) => {
    console.log('Row:', results.data)
  }
})
Docs
GitHub
Version
0.2

Features

Now the fastest CSV parser for React Native

The world's first multi-threaded CSV parser for React Native

react-native-csv can handle files gigabytes in size without crashing

Use react-native-csv when performance, privacy, and correctness matter to you

react-native-csv alleviates privacy concerns related to uploading files

Malformed CSV is handled gracefully with a detailed error report

  • CSV→JSON and JSON→CSV
  • Auto-detect delimiter
  • Open local files
  • Download remote files
  • Stream local and remote files
  • Multi-threaded
  • Header row support
  • Type conversion
  • Skip commented lines
  • Fast mode
  • Graceful error handling
  • Easy to use


    •   GitHub  Documentation

    People react-native-csv

    react-papaparse

    CSV Parsing

    "Isn't parsing CSV just String.split(',')?"

    react-native-csv does it right. Just pass in the CSV string with an optional configuration.

    import { readString } from 'react-native-csv'

const results = readString(csvString, config)

/*
results = {
  data: [ ... ],    // parsed data
  errors: [ ... ],  // errors encountered
  meta: { ... }     // extra parse info
}
*/

    Delimiter Detection

    "But I don't know the delimiter..."

    That's okay. react-native-csv will scan the first few rows to find the right delimiter.

    import { readString } from 'react-native-csv'

const results = readString(csvString)

console.log(results.meta.delimiter)

// "\t"

    Remote Files

    "No — I mean, the file isn't on my computer."

    Oh, well then just pass in the URL and — of course — a callback.

    readRemoteFile('http://example.com/file.csv', {
  download: true,
  complete: (results) => {
    console.log(results)
  }
})

    Streaming

    "Did I mention the file is huge?"

    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!')
  }
})

    Multi-Threading

    'Lovely. Now my web page locked up.'

    That happens when a long-running script is executing in the same thread as the page. Use a Worker thread by specifying worker: true. It may take slightly longer, but your page will stay reactive.

    readRemoteFile(bigFileURL, {
  worker: true,
  step: (row) => {
    console.log('Row:', row.data)
  },
  complete: () => {
    console.log('All done!')
  }
})

    Type Conversion

    "Hey, these numbers are parsed as strings."

    Everything is parsed as strings. If you want numbers and booleans, you can enable dynamic typing to do the conversion for you.

    // Converts numeric/boolean data
const results = readString(csvString {
  dynamicTyping: true
})

    Comments

    "I forgot to mention: my CSV files have comments in them."

    Okay, first off: that's really weird. But fortunately, you can skip those lines... just specify the comment string.

    // Mostly found in academia, some CSV files
// may have commented lines in them
const results = readString(csvString {
  comments: '#'
})

    Error Handling

    "Aw, shoot. Errors."

    react-native-csv handles errors pretty well. The CSV standard is somewhat loose ambiguous, so react-native-csv is designed for edge cases. For example, mismatched fields won't break parsing.

    // Example error:
{
  type: 'FieldMismatch',
  code: 'TooManyFields',
  message: 'Expected 3 fields, but parsed 4',
  row: 1
}

    JSON to CSV

    "Last thing: what about converting JSON to CSV?"

    Use jsonToCSV() function, passing in your array of arrays or array of objects. react-native-csv will figure it out.

    // Output is a properly-formatted CSV string.
const csv = jsonToCSV(jsonData)

    Install

    npm
    $ npm install react-native-csv --save

    yarn
    $ yarn add react-native-csv --save


      GitHub  Documentation