Rifhice/react-csv-reader

React component that handles csv file input and its parsing

react-csv-reader

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

You can try it out in a 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

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

class App extends Component {
  ...

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

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

Parameters

Name	Type	Default	Description
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.
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.
onError	function		Error handling function.
parserOptions	object	{}	PapaParse configuration object override
inputId	string		An id 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
ref	React ref		Reference of the <input>

Results

When the file has been loaded, it will be parsed with PapaParse from a CSV formatted text to a matrix. That matrix is returned to the parent component with onFileLoaded function (it will be passed as an argument). The second argument to onFileLoaded will be the filename provided

Replacing input by a different element

import React, { useRef } from "react";
import ReactDOM from 'react-dom';
import CSVReader from 'react-csv-reader';

const App = props => {
    const inputRef = useRef()
    const upload = () => inputRef.current.click()
    return (
        <div>
            <CSVReader
                ref={inputRef}
                onFileLoaded={console.log}
                onError={console.log}
                inputStyle={{ display: 'none' }}
            />
            <img
                style={{ width: 48, height: 36 }}
                alt="upload"
                src="http://www.graphicssimplified.com/wp-content/uploads/2015/04/upload-cloud.png"
                onClick={upload}
            />
        </div>
    );
}

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