{"id":22894260,"url":"https://github.com/clearcodehq/react-tags","last_synced_at":"2025-03-31T22:38:37.011Z","repository":{"id":69040464,"uuid":"120308510","full_name":"ClearcodeHQ/react-tags","owner":"ClearcodeHQ","description":null,"archived":false,"fork":false,"pushed_at":"2018-02-15T15:43:26.000Z","size":972,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T13:37:10.473Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/ClearcodeHQ.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2018-02-05T13:29:21.000Z","updated_at":"2018-02-15T15:43:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"06cf8eba-8a7e-42e2-a956-b14aa4478250","html_url":"https://github.com/ClearcodeHQ/react-tags","commit_stats":null,"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClearcodeHQ%2Freact-tags","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClearcodeHQ%2Freact-tags/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClearcodeHQ%2Freact-tags/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClearcodeHQ%2Freact-tags/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ClearcodeHQ","download_url":"https://codeload.github.com/ClearcodeHQ/react-tags/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246552972,"owners_count":20795835,"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":[],"created_at":"2024-12-13T23:17:20.865Z","updated_at":"2025-03-31T22:38:36.999Z","avatar_url":"https://github.com/ClearcodeHQ.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"React-Tags\n===\n\n[![MIT](https://img.shields.io/npm/l/react-tag-input.svg?style=flat-square)](https://github.com/prakhar1989/react-tags/blob/master/LICENSE)\n[![NPM Version](https://img.shields.io/npm/v/react-tag-input.svg?style=flat-square)](https://www.npmjs.com/package/react-tag-input)\n[![npm downloads](https://img.shields.io/npm/dm/react-tag-input.svg?style=flat-square)](https://www.npmjs.com/package/react-tag-input)\n[![build status](https://img.shields.io/travis/prakhar1989/react-tags.svg?style=flat-square)](https://travis-ci.org/prakhar1989/react-tags)\n[![Greenkeeper badge](https://badges.greenkeeper.io/prakhar1989/react-tags.svg)](https://greenkeeper.io/)\n\nReact-tags is a simple tagging component ready to drop in your React projects. The component is inspired by GMail's *To* field in the compose window.\n\n### [Looking for Maintainers](https://github.com/prakhar1989/react-tags/issues/197)\nInterested in working on this library as an owner and working with the community to add more features? Let me [know!](https://github.com/prakhar1989/react-tags/issues/197)\n\n### Features\n- Autocomplete based on a suggestion list\n- Keyboard friendly and mouse support\n- Reorder tags using drag and drop\n\n### Why\nBecause I was looking for an excuse to build a standalone component and publish it in the wild? To be honest, I needed a tagging component that provided the above features for my [React-Surveyman](http://github.com/prakhar1989/react-surveyman) project. Since I was unable to find one which met my requirements (and the fact that I generally enjoy re-inventing the wheel) this is what I came up with.\n\n\n### Demo\n![img](demo.gif)\n\nCheck it out [here](http://prakhar1989.github.io/react-tags/example/)\n\n### Installation\nThe preferred way of using the component is via NPM\n\n```\nnpm install --save react-tag-input\n```\nIt is, however, also available to be used separately (`dist/ReactTags.min.js`). If you prefer this method remember to include [ReactDND](https://github.com/gaearon/react-dnd) as a dependancy. Refer to the [demo](http://prakhar1989.github.io/react-tags/example/) to see how this works.\n\n### Usage\n\nHere's a sample implementation that initializes the component with a list of initial `tags` and `suggestions` list. Apart from this, there are multiple events, handlers for which need to be set. For more details, go through the [API](#Options).\n\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { WithContext as ReactTags } from 'react-tag-input';\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            tags: [{ id: 1, text: \"Thailand\" }, { id: 2, text: \"India\" }],\n            suggestions: ['USA', 'Germany', 'Austria', 'Costa Rica', 'Sri Lanka', 'Thailand']\n        };\n        this.handleDelete = this.handleDelete.bind(this);\n        this.handleAddition = this.handleAddition.bind(this);\n        this.handleDrag = this.handleDrag.bind(this);\n    }\n\n    handleDelete(i) {\n        let tags = this.state.tags;\n        tags.splice(i, 1);\n        this.setState({tags: tags});\n    }\n\n    handleAddition(tag) {\n        let tags = this.state.tags;\n        tags.push({\n            id: tags.length + 1,\n            text: tag\n        });\n        this.setState({tags: tags});\n    }\n\n    handleDrag(tag, currPos, newPos) {\n        let tags = this.state.tags;\n\n        // mutate array\n        tags.splice(currPos, 1);\n        tags.splice(newPos, 0, tag);\n\n        // re-render\n        this.setState({ tags: tags });\n    }\n\n    render() {\n        const { tags, suggestions } = this.state;\n        return (\n            \u003cdiv\u003e\n                \u003cReactTags tags={tags}\n                    suggestions={suggestions}\n                    handleDelete={this.handleDelete}\n                    handleAddition={this.handleAddition}\n                    handleDrag={this.handleDrag} /\u003e\n            \u003c/div\u003e\n        )\n    }\n};\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('app'));\n```\n\n**A note about `Contexts`**\nOne of the dependencies of this component is the [react-dnd](https://github.com/gaearon/react-dnd) library. Since the 1.0 version, the original author has changed the API and requires the application using any draggable components to have a top-level [backend](http://gaearon.github.io/react-dnd/docs-html5-backend.html) context. So if you're using this component in an existing Application that uses React-DND you will already have a backend defined, in which case, you should `require` the component *without* the context.\n\n```javascript\nconst ReactTags = require('react-tag-input').WithOutContext;\n```\nOtherwise, you can simply import along with the backend itself (as shown above). If you have ideas to make this API better, I'd [love to hear](https://github.com/prakhar1989/react-tags/issues/new).\n\n\u003ca name=\"Options\"\u003e\u003c/a\u003e\n### Options\n\n- [`tags`](#tagsOption)\n- [`suggestions`](#suggestionsOption)\n- [`delimiters`](#delimiters)\n- [`placeholder`](#placeholderOption)\n- [`labelField`](#labelFieldOption)\n- [`handleAddition`](#handleAdditionOption)\n- [`handleDelete`](#handleDeleteOption)\n- [`handleDrag`](#handleDragOption)\n- [`handleFilterSuggestions`](#handleFilterSuggestions)\n- [`autofocus`](#autofocus)\n- [`allowDeleteFromEmptyInput`](#allowDeleteFromEmptyInput)\n- [`handleInputChange`](#handleInputChange)\n- [`handleInputBlur`](#handleInputBlur)\n- [`minQueryLength`](#minQueryLength)\n- [`removeComponent`](#removeComponent)\n- [`autocomplete`](#autocomplete)\n- [`readOnly`](#readOnly)\n- [`name`](#nameOption)\n- [`id`](#idOption)\n- [`maxLength`](#maxLength)\n\n\u003ca name=\"tagsOption\"\u003e\u003c/a\u003e\n##### tags (optional)\nAn array of tags that are displayed as pre-selected. Each tag should have an `id` and a `text` property which is used to display.\n\n```js\nlet tags =  [ {id: 1, text: \"Apples\"} ]\n```\n\n\u003ca name=\"suggestionsOption\"\u003e\u003c/a\u003e\n##### suggestions (optional)\nAn array of suggestions that are used as basis for showing suggestions. At the moment, this should be an array of strings.\n\n```js\nlet suggestions = [\"mango\", \"pineapple\", \"orange\", \"pear\"];\n```\n\n\u003ca name=\"delimiters\"\u003e\u003c/a\u003e\n##### delimiters (optional)\nSpecifies which characters should terminate tags input (default: enter and tab). A list of character codes.\n\n\n\u003ca name=\"placeholderOption\"\u003e\u003c/a\u003e\n##### placeholder (optional)\nThe placeholder shown for the input. Defaults to `Add new tag`.\n\n```\nlet placeholder = \"Add new country\"\n```\n\n\u003ca name=\"labelFieldOption\"\u003e\u003c/a\u003e\n##### labelField (optional)\nProvide an alternative `label` property for the tags. Defaults to `text`.\n\n```\n\u003cReactTags tags={tags}\n    suggestions={}\n    labelField={'name'}\n    handleDrag={} /\u003e\n```\nThis is useful if your data uses the `text` property for something else.\n\n\n\u003ca name=\"handleAdditionOption\"\u003e\u003c/a\u003e\n##### handleAddition (required)\nFunction called when the user wants to add a tag (either a click, a tab press or carriage return)\n\n```js\nfunction(tag) {\n    // add the tag to the tag list\n}\n```\n\n\u003ca name=\"handleDeleteOption\"\u003e\u003c/a\u003e\n##### handleDelete (required)\nFunction called when the user wants to delete a tag\n\n```js\nfunction(i) {\n    // delete the tag at index i\n}\n```\n\n\u003ca name=\"handleDragOption\"\u003e\u003c/a\u003e\n##### handleDrag (optional)\nIf you want tags to be draggable, you need to provide this function.\nFunction called when the user drags a tag.\n\n```js\nfunction(tag, currPos, newPos) {\n    // remove tag from currPos and add in newPos\n}\n```\n\n\u003ca name=\"handleFilterSuggestions\"\u003e\u003c/a\u003e\n##### handleFilterSuggestions (optional)\nTo assert control over the suggestions filter, you may contribute a function that is executed whenever a filtered set\nof suggestions is expected. By default, the text input value will be matched against each suggestion, and [those that\n**start with** the entered text][default-suggestions-filter-logic] will be included in the filters suggestions list. If you do contribute a custom filter\nfunction, you must return an array of suggestions. Please do not mutate the passed suggestions array.\n\nFor example, if you prefer to override the default filter behavior and instead match any suggestions that contain\nthe entered text _anywhere_ in the suggestion, your `handleFilterSuggestions` property may look like this:\n\n```js\nfunction(textInputValue, possibleSuggestionsArray) {\n    var lowerCaseQuery = textInputValue.toLowerCase()\n\n    return possibleSuggestionsArray.filter(function(suggestion)  {\n        return suggestion.toLowerCase().includes(lowerCaseQuery)\n    })\n}\n```\n\nNote: The above custom filter uses `String.prototype.includes`, which was added to JavaScript as part of the ECMAScript 7\nspecification. If you need to support a browser that does not yet include support for this method, you will need to\neither refactor the above filter based on the capabilities of your supported browsers, or import a [polyfill for\n`String.prototype.includes`][includes-polyfill].\n\n\u003ca name=\"autofocus\"\u003e\u003c/a\u003e\n##### autofocus (optional)\nOptional boolean param to control whether the text-input should be autofocused on mount.\n\n```js\n\u003cReactTags\n    autofocus={false}\n    ...\u003e        \n```\n\n\u003ca name=\"allowDeleteFromEmptyInput\"\u003e\u003c/a\u003e\n##### allowDeleteFromEmptyInput (optional)\nOptional boolean param to control whether tags should be deleted when the 'Delete' key is pressed in an empty Input Box.\n\n```js\n\u003cReactTags\n    allowDeleteFromEmptyInput={false}\n    ...\u003e\n```\n\n\u003ca name=\"handleInputChange\"\u003e\u003c/a\u003e\n##### handleInputChange (optional)\nOptional event handler for input onChange\n\n```js\n\u003cReactTags\n    handleInputChange={this.handleInputChange}\n    ...\u003e\n```\n\n\u003ca name=\"handleInputBlur\"\u003e\u003c/a\u003e\n##### handleInputBlur (optional)\nOptional event handler for input onBlur\n\n```js\n\u003cReactTags\n    handleInputBlur={this.handleInputBlur}\n    ...\u003e\n```\n\n\u003ca name=\"minQueryLength\"\u003e\u003c/a\u003e\n##### minQueryLength (optional)\nHow many characters are needed for suggestions to appear (default: 2).\n\n\u003ca name=\"removeComponent\"\u003e\u003c/a\u003e\n##### removeComponent (optional)\nIf you'd like to supply your own tag delete/remove element, create a React component and pass it as a property to ReactTags using the `removeComponent` option. By default, a simple anchor link with an \"x\" text node as its only child is rendered, but if you'd like to, say, replace this with a `\u003cbutton\u003e` element that uses an image instead of text, your markup may look something like this:\n\n```javascript\nimport {WithContext as ReactTags} from 'react-tag-input'\n\nclass Foo extends React.Component {\n   render() {\n      return \u003cReactTags removeComponent={RemoveComponent}/\u003e\n   }\n}\n\nclass RemoveComponent extends React.Component {\n   render() {\n      return (\n         \u003cbutton {...this.props}\u003e\n            \u003cimg src=\"my-icon.png\" /\u003e\n         \u003c/button\u003e\n      )\n   }\n}\n```\n\nThe \"ReactTags__remove\" className and `onClick` handler properties can be automatically included on the `\u003cbutton\u003e` by using the [JSX spread attribute](https://facebook.github.io/react/docs/jsx-spread.html), as illustrated above.\n\n\u003ca name=\"autocomplete\"\u003e\u003c/a\u003e\n##### autocomplete (optional)\nUseful for enhancing data entry workflows for your users by ensuring the first matching suggestion is automatically converted to a tag when a [delimiter](#delimiters) key is pressed (such as the enter key). This option has three possible values:\n\n- `true` - when delimeter key (such as enter) is pressed, first matching suggestion is used.\n- `1` - when delimeter key (such as enter) is pressed, matching suggestion is used only if there is a single matching suggestion\n- `false` (default) - tags are not autocompleted on enter/delimiter\n\nThis option has no effect if there are no [`suggestions`](#suggestionsOption).\n\n\u003ca name=\"readOnly\"\u003e\u003c/a\u003e\n##### readOnly (optional)\nRenders the component in read-only mode without the input box and `removeComponent`. This also disables the drag-n-drop feature.\n\n\u003ca name=\"nameOption\"\u003e\u003c/a\u003e\n##### name (optional)\nThe name attribute added to the input.\n\n```\n\u003cReactTags\n    name = \"inputName\"\n    ...\u003e\n```\n\n\u003ca name=\"idOption\"\u003e\u003c/a\u003e\n##### id (optional)\nThe id attribute added to the input.\n\n```\n\u003cReactTags\n    id = \"inputId\"\n    ...\u003e\n```\n\n\u003ca name=\"maxLength\"\u003e\u003c/a\u003e\n##### maxLength (optional)\nThe maxLength attribute added to the input. Specifies the maximum number of characters allowed in the input field.\n\n```\n\u003cReactTags\n    maxLength = \"42\"\n    ...\u003e\n```\n\n### Styling\n`\u003cReactTags\u003e` does not come up with any styles. However, it is very easy to customize the look of the component the way you want it. By default, the component provides the following classes with which you can style -\n\n- `ReactTags__tags`\n- `ReactTags__tagInput`\n- `ReactTags__tagInputField`\n- `ReactTags__selected`\n- `ReactTags__selected ReactTags__tag`\n- `ReactTags__selected ReactTags__remove`\n- `ReactTags__suggestions`\n- `ReactTags__activeSuggestion`\n\nAn example can be found in `/example/reactTags.css`.\n\nIf you need to set your own class names on the component, you may pass in\na `classNames` prop.\n\n```js\n  \u003cReactTags\n    classNames={{\n      tags: 'tagsClass',\n      tagInput: 'tagInputClass',\n      tagInputField: 'tagInputFieldClass',\n      selected: 'selectedClass',\n      tag: 'tagClass',\n      remove: 'removeClass',\n      suggestions: 'suggestionsClass',\n      activeSuggestion: 'activeSuggestionClass'\n    }}\n    ...\u003e\n```\n\n\n### Dev\nThe component is written in ES6 and uses [Webpack](http://webpack.github.io/) as its build tool.\n```\nnpm install\nnpm run start\n```\n\n### Contributing\nGot ideas on how to make this better? Open an issue!\n\n### Thanks\nThe autocomplete dropdown is inspired by Lea Verou's [awesomeplete](https://github.com/LeaVerou/awesomplete) library. The Drag and drop functionality is provided by Dan Abramov's insanely useful [ReactDND](https://github.com/gaearon/react-dnd) library.\n\nAlso thanks to the awesome contributors who've made the library far better!\n\n\n[default-suggestions-filter-logic]: https://github.com/prakhar1989/react-tags/blob/v4.0.1/lib/ReactTags.js#L83\n[includes-polyfill]: https://github.com/mathiasbynens/String.prototype.includes\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclearcodehq%2Freact-tags","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclearcodehq%2Freact-tags","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclearcodehq%2Freact-tags/lists"}