Flexible, typed and easy to use React Component ⚛ to provide CSV, TSV and other delimiter-separated values formats (DSV) import functionality.
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
import { DSVImport, ColumnsType } from 'react-dsv-import';
type BasicType = { forename: string; surname: string; email: string };
const columns: ColumnsType<BasicType> = [
{ key: 'forename', label: 'Forename' },
{ key: 'surname', label: 'Surname' },
{ key: 'email', label: 'Email' }
];
<DSVImport<BasicType> columns={columns}>
<DSVImport.TextareaInput />
<DSVImport.TablePreview />
</DSVImport>
import { DSVImport } from 'react-dsv-import';
const columns = [
{ key: 'forename', label: 'Forename' },
{ key: 'surname', label: 'Surname' },
{ key: 'email', label: 'Email' }
];
<DSVImport columns={columns}>
<DSVImport.TextareaInput />
<DSVImport.TablePreview />
</DSVImport>
The <DSVImport<T>> components has the following API:
| Property | Type | Description |
|---|---|---|
columns |
ColumnType | Description of the expected columns |
transformers? |
Transformer[] |
Globally applied transformers |
onChange? |
(value: T[]) => void |
Callback which is called after parsing the input |
onValidation? |
(errors: Error<T>[]) => void |
Callback which is called if there are validation errors |
Within this section additional types are explained.
| 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[] |
Validation rules which are applied to this column |
transformers? |
Transformer[] |
Transformers which are applied to this column |
| Property | Type | Description |
|---|---|---|
message |
string |
Error message |
contraint |
{ unique: boolean } | { constraint: Constraint} |
Constraint for this rule |
(value: string) => boolean
(value: string) => string
This section describes the status of the project.
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 integration (see storybook)
- ✅ Input transformation (e.g. trim, ...)
- ❌ Material UI integration (see storybook)
✅ means the feature is implemented and released. ❌ indicates that a feature is planned.
- Article: Using ESLint and Prettier in a TypeScript Project
- Template: Rollup Starter Lib (TypeScript)
- Article: Creating a React Component library using Rollup, Typescript, Sass and Storybook
Explains how to create a React component library using Rollup - Template: Debugging tests in VS Code