Skip to content

Commit c1ec0ef

Browse files
committed
Add getting started and project chapter to README
1 parent 9c7c287 commit c1ec0ef

File tree

1 file changed

+60
-1
lines changed

1 file changed

+60
-1
lines changed

README.md

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,63 @@
11
# 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)
361

462
## Tools
563
- [yarn](https://yarnpkg.com/)
@@ -11,6 +69,7 @@ Flexible, typed and easy to use React component to provide CSV, TSV and other de
1169
- [Addon: Docs](https://github.com/storybookjs/storybook/tree/master/addons/docs)
1270
- [Addon: Source](https://github.com/storybookjs/storybook/tree/master/addons/storysource)
1371
- [Addon: Actions](https://github.com/storybookjs/storybook/tree/master/addons/actions)
72+
- [Travis CI](https://travis-ci.com)
1473

1574
## Resources
1675
- [Article: Using ESLint and Prettier in a TypeScript Project](https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project)

0 commit comments

Comments
 (0)