{"id":37807453,"url":"https://github.com/lang-ai/react-tags-input","last_synced_at":"2026-01-16T15:31:18.505Z","repository":{"id":49727191,"uuid":"80413010","full_name":"lang-ai/react-tags-input","owner":"lang-ai","description":"[Not Actively Maintained] An input control that handles tags interaction with copy-paste and custom type support.","archived":false,"fork":false,"pushed_at":"2021-06-10T09:33:02.000Z","size":2877,"stargazers_count":26,"open_issues_count":9,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-12T19:21:28.934Z","etag":null,"topics":["keyboard-shortcut","react","react-component","react-tags","tags"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lang-ai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-30T10:47:45.000Z","updated_at":"2024-03-18T10:26:27.000Z","dependencies_parsed_at":"2022-09-13T07:01:40.502Z","dependency_job_id":null,"html_url":"https://github.com/lang-ai/react-tags-input","commit_stats":null,"previous_names":["sentisis/react-tags-input","sentisis/tags-input"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/lang-ai/react-tags-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lang-ai%2Freact-tags-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lang-ai%2Freact-tags-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lang-ai%2Freact-tags-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lang-ai%2Freact-tags-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lang-ai","download_url":"https://codeload.github.com/lang-ai/react-tags-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lang-ai%2Freact-tags-input/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28479409,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T11:59:17.896Z","status":"ssl_error","status_checked_at":"2026-01-16T11:55:55.838Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["keyboard-shortcut","react","react-component","react-tags","tags"],"created_at":"2026-01-16T15:31:18.395Z","updated_at":"2026-01-16T15:31:18.470Z","avatar_url":"https://github.com/lang-ai.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# This repository is not being actively maintained\r\n\r\n\r\nReact-Tags-Input\r\n============\r\n\r\nAn input control that handles tags interaction with copy-paste and custom type support.\r\n\r\n![demo](https://raw.githubusercontent.com/sentisis/react-tags-input/master/demo.gif)\r\n\r\n## Live Playground\r\n\r\nFor examples of the tags input in action, check the [demo page](https://lang-ai.github.io/react-tags-input/)\r\n\r\n\r\n## Installation\r\n\r\nThe easiest way to use it is by installing it from NPM and include it in your own React build process.\r\n\r\n```javascript\r\nnpm install @sentisis/react-tags-input --save\r\n```\r\n\r\n## Usage\r\n\r\nExample usage:\r\n```jsx\r\nimport React from 'react';\r\nimport TagsInput from '@sentisis/react-tags-input';\r\n// Either a copy of our demo CSS or your custom one\r\nimport './TagsInput.css';\r\n\r\nexport default class Demo extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      tags: [],\r\n    };\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      \u003cTagsInput\r\n        label=\"Tags\"\r\n        placeholder=\"Write tags\"\r\n        tags={this.state.tags}\r\n        onChange={tags =\u003e this.setState({ tags })}\r\n      /\u003e\r\n    );\r\n  }\r\n}\r\n```\r\n\r\n## API\r\nCurrently the component listen to the following keys: \u003ckbd\u003eenter\u003c/kbd\u003e, \u003ckbd\u003eesc\u003c/kbd\u003e, \u003ckbd\u003ebackspace\u003c/kbd\u003e, \u003ckbd\u003emod\u003c/kbd\u003e+\u003ckbd\u003ea\u003c/kbd\u003e, \u003ckbd\u003emod\u003c/kbd\u003e+\u003ckbd\u003ec\u003c/kbd\u003e and \u003ckbd\u003emod\u003c/kbd\u003e+\u003ckbd\u003ev\u003c/kbd\u003e (for copy/paste).\r\n\r\nIt supports a keyboard-only copy paste (using \u003ckbd\u003emod\u003c/kbd\u003e+\u003ckbd\u003ea\u003c/kbd\u003e).\r\n\r\n![copy-paste-demo](https://raw.githubusercontent.com/sentisis/react-tags-input/master/copy-paste-demo.gif)\r\n\r\nEach tag you will be passing should have the following shape:\r\n\r\n| Property | Type | Required | Description |\r\n| -------- | ---- | ----------- | -------- |\r\n| value | `String` | true | Tag value |\r\n| special | `Boolean` | false | Special marks the tag as different. For example a special tag when using the case-sensitive options is a case-sensitive tag |\r\n\r\n\r\nThe TagsInput component contains the following properties:\r\n\r\n| Property | Type | Default | Description |\r\n| ---------| ---- | ------- | ----------- |\r\n| tags | `Array\u003cTags\u003e` | [] | Array of tags to display |\r\n| label | `String` | undefined | Rendered above the field itself |\r\n| placeholder | `String` | undefined | Input placeholder |\r\n| error | `String` | undefined | Error message rendered below the field. When the field is set it will also have the class `is-error`|\r\n| tagRenderer | `Function` | undefined | Optional function that gets used to render the tag |\r\n| copyButton | `Boolean` | false | Renders a copy to clipboard button |\r\n| copyButtonLabel | `String` | `Copy to clipboard` | Label for the copy to clipboard button |\r\n| blacklistChars | `Array\u003cString\u003e` | [','] | Characters not allowed in the tags. Must always contain `,` |\r\n| specialTags | `Boolean` | false | Enable the creation of special tags |\r\n| specialButtonRenderer | Function | undefined | Function that gets used to render the special button |\r\n| specialButtonLabel | String | `Special` | Label for the special button. Only used when a `specialButtonRenderer` is not defined |\r\n| onChange | Function | noop | Fired when changing the tags with the `tags` array as the argument |\r\n| onBlur | Function | noop | Fired as the standard React SyntheticEvent |\r\n| onFocus | Function | noop | Fired as the standard React SyntheticEvent |\r\n| onSubmit | Function | noop | Fired when the user interaction is considered complete, invoked with `tags` |\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flang-ai%2Freact-tags-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flang-ai%2Freact-tags-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flang-ai%2Freact-tags-input/lists"}