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.

Support me on Patreon!

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

importReact,{Component}from'react'importReactDOMfrom'react-dom'importCSVReaderfrom'react-csv-reader'classAppextendsComponent{
...
render(){return(<CSVReadercssClass="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.

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