https://github.com/openscript-ch/react-dsv-import
Flexible, typed and easy to use React Component ⚛ to provide CSV, TSV and other delimiter-separated values formats (DSV) import functionality.
https://github.com/openscript-ch/react-dsv-import
codeclimate csv dsv react react-component storybook tsv typescript vitejs
Last synced: 29 days ago
JSON representation
Flexible, typed and easy to use React Component ⚛ to provide CSV, TSV and other delimiter-separated values formats (DSV) import functionality.
- Host: GitHub
- URL: https://github.com/openscript-ch/react-dsv-import
- Owner: openscript-ch
- License: mit
- Created: 2020-04-10T11:11:09.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-04-10T17:04:42.000Z (6 months ago)
- Last Synced: 2025-04-10T18:48:00.753Z (6 months ago)
- Topics: codeclimate, csv, dsv, react, react-component, storybook, tsv, typescript, vitejs
- Language: TypeScript
- Homepage: https://openscript-ch.github.io/react-dsv-import/
- Size: 16 MB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-dsv-import
Flexible, typed and easy to use React Component ⚛ to provide CSV, TSV and other delimiter-separated values formats ([DSV](https://en.wikipedia.org/wiki/Delimiter-separated_values)) import functionality.
[](https://www.npmjs.com/package/react-dsv-import)
[](https://www.npmjs.com/package/react)
[](https://github.com/openscript-ch/react-dsv-import)
## Getting started
Add the package with the package manager of choice to your project:
- **yarn**: `yarn add react-dsv-import`
- **npm**: `npm install react-dsv-import`
- **npx**: `npx -p react-dsv-import`
- **pnpm**: `pnpm add react-dsv-import`
### TypeScript
```
import { DSVImport, ColumnsType } from 'react-dsv-import';
type BasicType = { forename: string; surname: string; email: string };
const columns: ColumnsType = [
{ key: 'forename', label: 'Forename' },
{ key: 'surname', label: 'Surname' },
{ key: 'email', label: 'Email' }
];
columns={columns}>
```
### JavaScript
```
import { DSVImport } from 'react-dsv-import';
const columns = [
{ key: 'forename', label: 'Forename' },
{ key: 'surname', label: 'Surname' },
{ key: 'email', label: 'Email' }
];
```
## API
The `>` components has the following API:
| Property | Type | Description |
| :-------------- | :------------------------------ | :------------------------------------------------------ |
| `columns` | [ColumnType](#columntype) | Description of the expected columns |
| `transformers?` | [Transformer](#transformer)`[]` | Globally applied transformers |
| `onChange?` | `(value: T[]) => void` | Callback which is called after parsing the input |
| `onValidation?` | `(errors: Error[]) => void` | Callback which is called if there are validation errors |
### Types
Within this section additional types are explained.
#### ColumnType
| Property | Type | Description |
| :-------------- | :------------------------------ | :---------------------------------------------------------- |
| `key` | `string` | Key of the current column |
| `label` | `string` | Label of the current column, which can be shown to the user |
| `rules?` | [Rule](#rule)`[]` | Validation rules which are applied to this column |
| `transformers?` | [Transformer](#transformer)`[]` | Transformers which are applied to this column |
#### Rule
| Property | Type | Description |
| :---------- | :------------------------------------------------------------------ | :----------------------- |
| `message` | `string` | Error message |
| `contraint` | `{ unique: boolean } \| { constraint: `[Constraint](#constraint)`}` | Constraint for this rule |
#### Constraint
`(value: string) => boolean`
#### Transformer
`(value: string) => string`
## Project
This section describes the status of the project.
### Features
The most important features of this component are:
- ✅ Type definitions and type safety
- ✅ DSV format detection
- ✅ Fully compositable
- ✅ Automatic testing with >90% coverage
- ✅ Input validation
- ✅ [Ant Design](https://ant.design/) integration (see storybook)
- ✅ Input transformation (e.g. trim, ...)
- ❌ [Material UI](https://material-ui.com/) integration (see storybook)
✅ means the feature is implemented and released. ❌ indicates that a feature is planned.