# react-dsv-import > Flexible, typed and easy to use React Component ⚛ to provide CSV, TSV and other delimiter-separated values formats (DSV) import functionality. Latest version **0.4.10** (published 2024-12-16) · MIT license · 0 weekly downloads ## Install ```sh npm install react-dsv-import pnpm add react-dsv-import yarn add react-dsv-import bun add react-dsv-import ``` ## Health **Score 50/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; high maintenance score. Warnings: low downloads; pre 1.0. Negative: stale. ## Facts | | | |---|---| | Version | 0.4.10 | | Published | 2024-12-16 | | First published | 2020-04-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 18.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 5 | | Author | openscript GmbH | | Maintainers | diego.steiner, openscript, stampaaaron | | Keywords | react-component, typescript, react | ## Links - npm: https://www.npmjs.com/package/react-dsv-import - Repository: https://github.com/openscript-ch/react-dsv-import - Homepage: https://openscript-ch.github.io/react-dsv-import/ - Issues: https://github.com/openscript-ch/react-dsv-import/issues - npm.io page: https://npm.io/package/react-dsv-import ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.4.10 (latest) — 2024-12-16 - 0.4.9 — 2024-12-16 - 0.4.8 — 2024-12-16 - 0.4.7 — 2024-12-16 - 0.4.6 — 2024-12-15 - 0.4.5 — 2024-12-13 - 0.4.0 — 2022-06-24 - 0.3.11 — 2022-06-24 - 0.3.9 — 2021-04-05 - 0.3.7 — 2020-11-03 - 0.3.6 — 2020-09-13 - 0.3.5 — 2020-07-17 - 0.3.4 — 2020-06-08 - 0.3.3 — 2020-05-31 - 0.3.2 — 2020-05-26 - … 13 more at https://npm.io/package/react-dsv-import/versions ## README # react-dsv-import Flexible, typed and easy to use React Component ⚛ to provide CSV, TSV and other delimiter-separated values formats ([DSV](https://en.wikipedia.org/wiki/Delimiter-separated_values)) import functionality. [![npm](https://img.shields.io/npm/v/react-dsv-import)](https://www.npmjs.com/package/react-dsv-import) [![npm peer dependency version](https://img.shields.io/npm/dependency-version/react-dsv-import/peer/react)](https://www.npmjs.com/package/react) [![GitHub](https://img.shields.io/github/license/openscript/react-dsv-import)](https://github.com/openscript-ch/react-dsv-import) ![Demonstration](./docs/demo.apng) ## 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` ### TypeScript ``` 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}> ``` ### JavaScript ``` 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](#columntype) | Description of the expected columns | | `transformers?` | [Transformer](#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 | ### 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](#rule)`[]` | Validation rules which are applied to this column | | `transformers?` | [Transformer](#transformer)`[]` | Transformers which are applied to this column | #### Rule | Property | Type | Description | | :---------- | :------------------------------------------------------------------ | :----------------------- | | `message` | `string` | Error message | | `contraint` | `{ unique: boolean } \| { constraint: `[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](https://ant.design/) integration (see storybook) - ✅ Input transformation (e.g. trim, ...) - ❌ [Material UI](https://material-ui.com/) integration (see storybook) ✅ means the feature is implemented and released. ❌ indicates that a feature is planned. --- _Source: https://npm.io/package/react-dsv-import · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._