All Projects → Bunlong → React Papaparse

Bunlong / React Papaparse

Licence: mit
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.

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to React Papaparse

Fast Csv
CSV parser and formatter for node
Stars: ✭ 1,054 (+808.62%)
Mutual labels:  stream, csv, csv-parser
Csv Stream
📃 Streaming CSV Parser for Node. Small and made entirely out of streams.
Stars: ✭ 98 (-15.52%)
Mutual labels:  stream, csv, csv-parser
React Csv Reader
React component that handles csv file input and its parsing
Stars: ✭ 138 (+18.97%)
Mutual labels:  csv, csv-parser, input
Csvutil
csvutil provides fast and idiomatic mapping between CSV and Go (golang) values.
Stars: ✭ 501 (+331.9%)
Mutual labels:  csv, csv-parser
Csv
CSV Decoding and Encoding for Elixir
Stars: ✭ 398 (+243.1%)
Mutual labels:  stream, csv
Jsoncons
A C++, header-only library for constructing JSON and JSON-like data formats, with JSON Pointer, JSON Patch, JSON Schema, JSONPath, JMESPath, CSV, MessagePack, CBOR, BSON, UBJSON
Stars: ✭ 400 (+244.83%)
Mutual labels:  csv, csv-parser
VBA-CSV-interface
The most powerful and comprehensive CSV/TSV/DSV data management library for VBA, providing parsing/writing capabilities compliant with RFC-4180 specifications and a complete set of tools for manipulating records and fields.
Stars: ✭ 24 (-79.31%)
Mutual labels:  csv, csv-parser
Clevercsv
CleverCSV is a Python package for handling messy CSV files. It provides a drop-in replacement for the builtin CSV module with improved dialect detection, and comes with a handy command line application for working with CSV files.
Stars: ✭ 887 (+664.66%)
Mutual labels:  csv, csv-parser
Filehelpers
The FileHelpers are a free and easy to use .NET library to read/write data from fixed length or delimited records in files, strings or streams
Stars: ✭ 917 (+690.52%)
Mutual labels:  csv, csv-parser
Faster Than Csv
Faster CSV on Python 3
Stars: ✭ 52 (-55.17%)
Mutual labels:  csv, csv-parser
Ngx Papaparse
Papa Parse wrapper for Angular
Stars: ✭ 83 (-28.45%)
Mutual labels:  csv, csv-parser
Csv Parser
A modern C++ library for reading, writing, and analyzing CSV (and similar) files.
Stars: ✭ 359 (+209.48%)
Mutual labels:  csv, csv-parser
Awesomecsv
🕶️A curated list of awesome tools for dealing with CSV.
Stars: ✭ 305 (+162.93%)
Mutual labels:  csv, csv-parser
Vroom
Fast reading of delimited files
Stars: ✭ 462 (+298.28%)
Mutual labels:  csv, csv-parser
text2json
Performant parser for textual data (CSV parser)
Stars: ✭ 33 (-71.55%)
Mutual labels:  csv, stream
Csv File Validator
🔧🔦 Validation of CSV file against user defined schema (returns back object with data and invalid messages)
Stars: ✭ 60 (-48.28%)
Mutual labels:  csv, csv-parser
Iostreams
IOStreams is an incredibly powerful streaming library that makes changes to file formats, compression, encryption, or storage mechanism transparent to the application.
Stars: ✭ 84 (-27.59%)
Mutual labels:  stream, csv
pcap-processor
Read and process pcap files using this nifty tool
Stars: ✭ 36 (-68.97%)
Mutual labels:  csv, stream
flatpack
CSV/Tab Delimited and Fixed Length Parser and Writer
Stars: ✭ 55 (-52.59%)
Mutual labels:  csv, csv-parser
Csv
Fast C# CSV parser
Stars: ✭ 53 (-54.31%)
Mutual labels:  csv, csv-parser

⭐️ 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.

NPM downloads npm bundle size Build Status JavaScript Style Guide

🎁 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

📖 Demo & Documentation

To learn how to use react-papaparse:

FAQ:

📚 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

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

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

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

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

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

🎀 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.11.1 (2020-12-14):

  • Prevent config prop mutation

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

🛣️ Roadmap

🆕 v3.12.x

  • Improve CSVDownloader

🆕 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
Bunlong
Tim Tutt
Tim Tutt
Pieter Kuppens
Pieter Kuppens
Jack Zhao
Jack Zhao
Pablo Mnichini
Pablo Mnichini
Mystical Tech
Mystical Tech
Bruno
Bruno
Samuel Hulla
Samuel Hulla
glinkot
glinkot
Paul Leavitt
Paul Leavitt
Gabriel
Gabriel
Izaak
Izaak
Oliver
Oliver
Ole Skaar
Ole Skaar
Des
Des
Karl
Karl
Max
Max
Kostas
Kostas
Dalitzky
Dalitzky

👨‍👩‍👦 Advertisement

You maybe interested.

⚖️ License

The MIT License License: MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].