Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nzambello/react-csv-reader
React component that handles csv file input and its parsing
https://github.com/nzambello/react-csv-reader
csv csv-parser input javascript parse react reactjs typescript
Last synced: 1 day ago
JSON representation
React component that handles csv file input and its parsing
- Host: GitHub
- URL: https://github.com/nzambello/react-csv-reader
- Owner: nzambello
- License: mit
- Created: 2017-12-23T12:18:50.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2023-06-13T00:24:45.000Z (over 1 year ago)
- Last Synced: 2025-02-12T12:09:01.142Z (8 days ago)
- Topics: csv, csv-parser, input, javascript, parse, react, reactjs, typescript
- Language: TypeScript
- Homepage: https://nzambello.github.io/react-csv-reader/
- Size: 6.35 MB
- Stars: 201
- Watchers: 3
- Forks: 48
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-csv-reader
[](https://www.npmjs.com/package/react-csv-reader)
[](https://www.npmjs.com/package/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](https://nzambello.github.io/react-csv-reader/)
You can try it out in the playground in the [docs](https://nzambello.github.io/react-csv-reader/usage#playground) or in the [demo on Codesandbox](https://codesandbox.io/s/react-csv-reader-vtull).
## Installation
Install the package with either yarn or npm.
With yarn:
```sh
yarn add react-csv-reader
```
With npm:
```sh
npm install --save react-csv-reader
```
## Usage
Basic usage:
```javascript
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import CSVReader from 'react-csv-reader'
class App extends Component {
...
render() {
return (
console.dir(data, fileInfo, originalFile)} />
)
}
}
ReactDOM.render(, document.getElementById('root'))
```
More complex example:
```javascript
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 (
)
}
}
ReactDOM.render(, 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 `` element. |
| cssLabelClass | string | `csv-label` | A CSS class to be applied to the `` element. |
| label | string, element | | If present, it will be rendered in a `` 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](https://www.papaparse.com/docs#config) object override |
| inputId | string | `react-csv-reader-input` | An id to be applied to the `` element. |
| inputName | string | `react-csv-reader-input` | A name attribute to be applied to the `` element. |
| inputStyle | object | `{}` | Some style to be applied to the `` 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](https://github.com/mholt/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.
```typescript
// data: PapaParse.ParseResult.data
// fileInfo: IFileInfo
onFileLoaded: (data: Array, fileInfo: IFileInfo, originalFile: File) => any
```
For type definitions, see [here](src/index.tsx#L20).
## Testing
This packages uses `jest` for unit tests and snapshot testing.
To run the tests:
```sh
yarn test
```
Automated accessibility tests are run with `jest-axe`.
## Contributions
Please follow our [convention](COMMITLINT.md) on commits format.