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