1
1
# react-dsv-import
2
- Flexible, typed and easy to use React component to provide CSV, TSV and other delimiter-separated values formats (DSV) import functionality.
2
+ Flexible, typed and easy to use React Component ⚛ to provide CSV, TSV and other delimiter-separated values formats (DSV) import functionality.
3
+
4
+ ![ Travis (.com)] ( https://img.shields.io/travis/com/openscript/react-dsv-import ) ![ npm] ( https://img.shields.io/npm/v/react-dsv-import ) ![ npm peer dependency version] ( https://img.shields.io/npm/dependency-version/react-dsv-import/peer/react ) ![ GitHub] ( https://img.shields.io/github/license/openscript/react-dsv-import )
5
+
6
+ ## Getting started
7
+ Add the package with the package manager of choice to your project:
8
+
9
+ - ** yarn** : ` yarn add react-dsv-import `
10
+ - ** npm** : ` npm install react-dsv-import `
11
+ - ** npx** : ` npx -p react-dsv-import `
12
+
13
+ ### TypeScript
14
+ ```
15
+ import { ColumnsType, DSVImport } from 'react-dsv-import';
16
+
17
+ type ImportType = { forename: string; surname: string; email: string };
18
+
19
+ const columns: ColumnsType<ImportType> = [
20
+ { key: 'forename', label: 'Forename' },
21
+ { key: 'surname', label: 'Surname' },
22
+ { key: 'email', label: 'Email' }
23
+ ];
24
+
25
+ <DSVImport<ImportType> columns={columns} />
26
+ ```
27
+
28
+ ### JavaScript
29
+ ```
30
+ import { DSVImport } from 'react-dsv-import';
31
+
32
+ const columns = [
33
+ { key: 'forename', label: 'Forename' },
34
+ { key: 'surname', label: 'Surname' },
35
+ { key: 'email', label: 'Email' }
36
+ ];
37
+
38
+ <DSVImport columns={columns} />
39
+ ```
40
+
41
+ ## Project
42
+ This section describes the status of the project.
43
+
44
+ ### Features
45
+ The most important features of this component are:
46
+
47
+ - ✅ Type definitions and type safety
48
+ - ✅ DSV format detection
49
+ - ❌ Input validation
50
+ - ❌ [ Material UI] ( https://material-ui.com/ ) integration
51
+ - ❌ [ ant.design] ( https://ant.design/ ) integration
52
+ - ❌ Fully compositable
53
+
54
+ ✅ means the feature is implemented and released. ❌ indicates that a feature is planned.
55
+
56
+ ### Links
57
+ - [ Code repository] ( https://github.com/openscript/react-dsv-import )
58
+ - [ Build status] ( https://travis-ci.com/github/openscript/react-dsv-import )
59
+ - [ Documenation and examples] ( https://openscript.github.io/react-dsv-import )
60
+ - [ Package publication] ( https://www.npmjs.com/package/react-dsv-import )
3
61
4
62
## Tools
5
63
- [ yarn] ( https://yarnpkg.com/ )
@@ -11,6 +69,7 @@ Flexible, typed and easy to use React component to provide CSV, TSV and other de
11
69
- [ Addon: Docs] ( https://github.com/storybookjs/storybook/tree/master/addons/docs )
12
70
- [ Addon: Source] ( https://github.com/storybookjs/storybook/tree/master/addons/storysource )
13
71
- [ Addon: Actions] ( https://github.com/storybookjs/storybook/tree/master/addons/actions )
72
+ - [ Travis CI] ( https://travis-ci.com )
14
73
15
74
## Resources
16
75
- [ Article: Using ESLint and Prettier in a TypeScript Project] ( https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project )
0 commit comments