react-csv-reader

react-csv-reader

React component that handles csv file input. It handles file input and returns its content as a matrix.

Docs: nzambello.github.io/react-csv-reader

You can try it out in the playground in the docs or in the demo on Codesandbox.

Installation

Install the package with either yarn or npm.

With yarn:

yarn add react-csv-reader

With npm:

npm install --save react-csv-reader

Usage

Basic usage:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import CSVReader from 'react-csv-reader'

class App extends Component {
  ...

  render() {
    return (
      <CSVReader onFileLoaded={(data, fileInfo, originalFile) => console.dir(data, fileInfo, originalFile)} />
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

More complex example:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import CSVReader from 'react-csv-reader'

class App extends Component {
  ...

  const papaparseOptions = {
    header: true,
    dynamicTyping: true,
    skipEmptyLines: true,
    transformHeader: header =>
      header
        .toLowerCase()
        .replace(/\W/g, '_')
  }

  render() {
    return (
      <CSVReader
        cssClass="csv-reader-input"
        label="Select CSV with secret Death Star statistics"
        onFileLoaded={this.handleForce}
        onError={this.handleDarkSideForce}
        parserOptions={papaparseOptions}
        inputId="ObiWan"
        inputName="ObiWan"
        inputStyle={{color: 'red'}}
      />
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

Parameters

Name	Type	Default	Description
accept	string	.csv, text/csv	File type accepted by file input.
cssClass	string	csv-reader-input	A CSS class to be applied to the wrapper element.
cssInputClass	string	csv-input	A CSS class to be applied to the <input> element.
cssLabelClass	string	csv-label	A CSS class to be applied to the <label> element.
label	string, element		If present, it will be rendered in a <label> to describe input aim.
onFileLoaded	function		(required) The function to be called passing loaded results, see below.
onError	function		Error handling function.
parserOptions	object	{}	PapaParse configuration object override
inputId	string	react-csv-reader-input	An id to be applied to the <input> element.
inputName	string	react-csv-reader-input	A name attribute to be applied to the <input> element.
inputStyle	object	{}	Some style to be applied to the <input> element.
fileEncoding	string	UTF-8	Encoding type of the input file.
disabled	boolean	false	Set input disabled attribute.
strict	boolean	false	Throws error on onError if file type is different from accept.

onFileLoaded

When the file has been loaded, it will be parsed with PapaParse from a CSV formatted text to a matrix of strings or a list of objects (using header option). That parsed data is returned to the parent component with onFileLoaded function (it will be passed as an argument). The second argument to onFileLoaded will be an object with infos about loaded file.

// data: PapaParse.ParseResult.data
// fileInfo: IFileInfo
onFileLoaded: (data: Array<any>, fileInfo: IFileInfo, originalFile: File) => any

For type definitions, see here.

Testing

This packages uses jest for unit tests and snapshot testing.

To run the tests:

yarn test

Automated accessibility tests are run with jest-axe.

Contributions

Please follow our convention on commits format.

Changelog

4.0.0 (2023-03-23)

⚠ BREAKING CHANGES

• Console error when using MutableRef from useRef

Features

• support react 18 (3d02d93)

Bug Fixes

• npm run docz:build error (5b410d0)
• cleanup merge conflicts (90248db)
• Console error when using MutableRef from useRef (6d5a595)

Maintenance

• npm run build (62c04e1)
• add prop-types as dep (a4067a4)
• run build (ebae51b)
• upgrade to yarn@3 (ebde83b)