
Security News
New CVE Forecasting Tool Predicts 47,000 Disclosures in 2025
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
react-csv-reader
Advanced tools
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-reader
With npm:
npm install --save react-csv-reader
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'))
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) => any
For type definitions, see here.
This packages uses jest
for unit tests and snapshot testing.
To run the tests:
yarn test
Automated accessibility tests are run with jest-axe
.
Please follow our convention on commits format.
FAQs
React component that handles csv file input.
The npm package react-csv-reader receives a total of 12,660 weekly downloads. As such, react-csv-reader popularity was classified as popular.
We found that react-csv-reader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.