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.
Install the package with either yarn or npm.
With yarn:
yarn add react-csv-readerWith npm:
npm install --save react-csv-readerBasic 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'))| 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. |
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) => anyFor type definitions, see here.
This packages uses jest for unit tests and snapshot testing.
To run the tests:
yarn testAutomated accessibility tests are run with jest-axe.
Please follow our convention on commits format.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent