{"id":15043277,"url":"https://github.com/openscript-ch/react-dsv-import","last_synced_at":"2025-09-07T17:40:24.450Z","repository":{"id":39494457,"uuid":"254614979","full_name":"openscript-ch/react-dsv-import","owner":"openscript-ch","description":"Flexible, typed and easy to use React Component ⚛ to provide CSV, TSV and other delimiter-separated values formats (DSV) import functionality.","archived":false,"fork":false,"pushed_at":"2025-04-10T17:04:42.000Z","size":16735,"stargazers_count":5,"open_issues_count":6,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T18:48:00.753Z","etag":null,"topics":["codeclimate","csv","dsv","react","react-component","storybook","tsv","typescript","vitejs"],"latest_commit_sha":null,"homepage":"https://openscript-ch.github.io/react-dsv-import/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/openscript-ch.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-10T11:11:09.000Z","updated_at":"2025-04-10T17:03:00.000Z","dependencies_parsed_at":"2023-10-04T10:04:16.694Z","dependency_job_id":"25beaa08-9b41-48a4-b74f-c8cbab5fd66e","html_url":"https://github.com/openscript-ch/react-dsv-import","commit_stats":{"total_commits":164,"total_committers":8,"mean_commits":20.5,"dds":0.2987804878048781,"last_synced_commit":"58d023e3d1b2b23311ca59b1d302845b74e35b60"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openscript-ch%2Freact-dsv-import","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openscript-ch%2Freact-dsv-import/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openscript-ch%2Freact-dsv-import/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openscript-ch%2Freact-dsv-import/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/openscript-ch","download_url":"https://codeload.github.com/openscript-ch/react-dsv-import/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248782260,"owners_count":21160717,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codeclimate","csv","dsv","react","react-component","storybook","tsv","typescript","vitejs"],"created_at":"2024-09-24T20:48:47.878Z","updated_at":"2025-04-13T21:11:31.364Z","avatar_url":"https://github.com/openscript-ch.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-dsv-import\n\nFlexible, 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.\n\n[![npm](https://img.shields.io/npm/v/react-dsv-import)](https://www.npmjs.com/package/react-dsv-import)\n[![npm peer dependency version](https://img.shields.io/npm/dependency-version/react-dsv-import/peer/react)](https://www.npmjs.com/package/react)\n[![GitHub](https://img.shields.io/github/license/openscript/react-dsv-import)](https://github.com/openscript-ch/react-dsv-import)\n\n![Demonstration](./docs/demo.apng)\n\n## Getting started\n\nAdd the package with the package manager of choice to your project:\n\n- **yarn**: `yarn add react-dsv-import`\n- **npm**: `npm install react-dsv-import`\n- **npx**: `npx -p react-dsv-import`\n- **pnpm**: `pnpm add react-dsv-import`\n\n### TypeScript\n\n```\nimport { DSVImport, ColumnsType } from 'react-dsv-import';\n\ntype BasicType = { forename: string; surname: string; email: string };\n\nconst columns: ColumnsType\u003cBasicType\u003e = [\n  { key: 'forename', label: 'Forename' },\n  { key: 'surname', label: 'Surname' },\n  { key: 'email', label: 'Email' }\n];\n\n\u003cDSVImport\u003cBasicType\u003e columns={columns}\u003e\n  \u003cDSVImport.TextareaInput /\u003e\n  \u003cDSVImport.TablePreview /\u003e\n\u003c/DSVImport\u003e\n```\n\n### JavaScript\n\n```\nimport { DSVImport } from 'react-dsv-import';\n\nconst columns = [\n  { key: 'forename', label: 'Forename' },\n  { key: 'surname', label: 'Surname' },\n  { key: 'email', label: 'Email' }\n];\n\n\u003cDSVImport columns={columns}\u003e\n  \u003cDSVImport.TextareaInput /\u003e\n  \u003cDSVImport.TablePreview /\u003e\n\u003c/DSVImport\u003e\n```\n\n## API\n\nThe `\u003cDSVImport\u003cT\u003e\u003e` components has the following API:\n\n| Property        | Type                            | Description                                             |\n| :-------------- | :------------------------------ | :------------------------------------------------------ |\n| `columns`       | [ColumnType](#columntype)       | Description of the expected columns                     |\n| `transformers?` | [Transformer](#transformer)`[]` | Globally applied transformers                           |\n| `onChange?`     | `(value: T[]) =\u003e void`          | Callback which is called after parsing the input        |\n| `onValidation?` | `(errors: Error\u003cT\u003e[]) =\u003e void`  | Callback which is called if there are validation errors |\n\n### Types\n\nWithin this section additional types are explained.\n\n#### ColumnType\n\n| Property        | Type                            | Description                                                 |\n| :-------------- | :------------------------------ | :---------------------------------------------------------- |\n| `key`           | `string`                        | Key of the current column                                   |\n| `label`         | `string`                        | Label of the current column, which can be shown to the user |\n| `rules?`        | [Rule](#rule)`[]`               | Validation rules which are applied to this column           |\n| `transformers?` | [Transformer](#transformer)`[]` | Transformers which are applied to this column               |\n\n#### Rule\n\n| Property    | Type                                                                | Description              |\n| :---------- | :------------------------------------------------------------------ | :----------------------- |\n| `message`   | `string`                                                            | Error message            |\n| `contraint` | `{ unique: boolean } \\| { constraint: `[Constraint](#constraint)`}` | Constraint for this rule |\n\n#### Constraint\n\n`(value: string) =\u003e boolean`\n\n#### Transformer\n\n`(value: string) =\u003e string`\n\n## Project\n\nThis section describes the status of the project.\n\n### Features\n\nThe most important features of this component are:\n\n- ✅ Type definitions and type safety\n- ✅ DSV format detection\n- ✅ Fully compositable\n- ✅ Automatic testing with \u003e90% coverage\n- ✅ Input validation\n- ✅ [Ant Design](https://ant.design/) integration (see storybook)\n- ✅ Input transformation (e.g. trim, ...)\n- ❌ [Material UI](https://material-ui.com/) integration (see storybook)\n\n✅ means the feature is implemented and released. ❌ indicates that a feature is planned.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenscript-ch%2Freact-dsv-import","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopenscript-ch%2Freact-dsv-import","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenscript-ch%2Freact-dsv-import/lists"}