react-dsv-import

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

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 |

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.

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 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.

Links

• Code repository
• Build status
• Documenation and examples
• Package publication
• Code quality evaluation

Tools

• yarn
• rollup.js
• TypeScript
  • TypeScript ESLint
• React
• Storybook
  • Addon: Docs
  • Addon: Source
  • Addon: Actions
• Travis CI

Resources

• 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