React-dsv-import NPM

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

TypeScript

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>

JavaScript

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>

API

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

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