react-dsv-import

Flexible, typed and easy to use React Component ⚛ to provide CSV, TSV and other delimiter-separated values formats (DSV) import functionality.


!Demonstration

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

$3

``
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}>



`

$3

`
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 | 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[]) => void | Callback which is called if there are validation errors |

$3

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[] | Validation rules which are applied to this column |
| transformers? | Transformer[] | Transformers which are applied to this column |

#### Rule

| Property | Type | Description |
| :---------- | :------------------------------------------------------------------ | :----------------------- |
| message | string | Error message |
| contraint | { unique: boolean } \| { constraint: Constraint} | Constraint for this rule |

#### Constraint

(value: string) => boolean

#### Transformer

(value: string) => string`

Project

This section describes the status of the project.

$3

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.