{"id":13406839,"url":"https://github.com/react-tags/react-tags","last_synced_at":"2025-12-24T07:55:08.588Z","repository":{"id":31591082,"uuid":"35155896","full_name":"react-tags/react-tags","owner":"react-tags","description":"A fantastically simple tagging component for your projects","archived":false,"fork":false,"pushed_at":"2025-02-25T17:00:00.000Z","size":5940,"stargazers_count":1538,"open_issues_count":105,"forks_count":400,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-05-08T01:45:56.730Z","etag":null,"topics":["autocomplete","dragdrop","hacktoberfest","hacktoberfest2023","javascript","react","react-tags"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/p/sandbox/react-tags-l65545","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/react-tags.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":"ad1992"}},"created_at":"2015-05-06T12:02:03.000Z","updated_at":"2025-05-07T15:48:10.000Z","dependencies_parsed_at":"2023-02-14T05:30:42.897Z","dependency_job_id":"df007fc6-2d79-4100-a2ac-d1fe966cf321","html_url":"https://github.com/react-tags/react-tags","commit_stats":{"total_commits":514,"total_committers":77,"mean_commits":6.675324675324675,"dds":0.7821011673151751,"last_synced_commit":"594fd18df9a256af7bc6b59e1129ddd55a843176"},"previous_names":["prakhar1989/react-tags"],"tags_count":92,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-tags%2Freact-tags","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-tags%2Freact-tags/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-tags%2Freact-tags/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-tags%2Freact-tags/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-tags","download_url":"https://codeload.github.com/react-tags/react-tags/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253969249,"owners_count":21992263,"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":["autocomplete","dragdrop","hacktoberfest","hacktoberfest2023","javascript","react","react-tags"],"created_at":"2024-07-30T19:02:40.666Z","updated_at":"2025-12-24T07:55:05.560Z","avatar_url":"https://github.com/react-tags.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ad1992"],"categories":["TypeScript","JavaScript"],"sub_categories":[],"readme":"# React tags\n\n[![MIT](https://img.shields.io/npm/l/react-tag-input.svg?style=flat-square)](https://github.com/react-tags/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[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![Support on Github Sponsors](https://img.shields.io/badge/GitHub-❤️-99e9f2.svg?logo=github\u0026label=Sponsor)](https://github.com/sponsors/ad1992)\n\n\nReact-tags is a simple tagging component ready to drop in your projects. The component is inspired by GMail's *To* field in the compose window.\n\n## Features\n- Autocomplete based on a suggestion list\n- Keyboard friendly and mouse support\n- Reorder tags using drag and drop\n- Edit tag support\n- Optional clear all button\n\n## Why\nStarted by [Prakhar Srivastav](https://github.com/prakhar1989) and later maintained by [Aakansha Doshi](https://github.com/ad1992).\n\nIn Prakhar's words here is why he started it👇🏻\n\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](https://codesandbox.io/p/sandbox/react-tags-l65545)\n\n\n## Installation\nYou can use npm\n\n```\nnpm install --save react-tag-input\n```\n\nor via Yarn\n\n```js\nyarn add react-tag-input\n```\nmake sure you have installed the **peer dependencies** as well with :point_down: versions\n\n```\n \"react\": \"^18.2.0\",\n \"react-dnd\": \"^14.0.2\",\n \"react-dnd-html5-backend\": \"^14.0.0\",\n \"react-dom\": \"^18.2.0\"\n```\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 { createRoot } from 'react-dom/client';\nimport { StrictMode } from 'react';\nimport GitHubCorner from './GithubCorner';\nimport type { Tag } from '../src/components/SingleTag';\nimport { WithContext as ReactTags, SEPARATORS } from '../src/index';\n;\n\nconst suggestions = COUNTRIES.map((country) =\u003e {\n  return {\n    id: country,\n    text: country,\n    className: '',\n  };\n});\n\nconst KeyCodes = {\n  comma: 188,\n  enter: [10, 13],\n};\n\n\nconst App = () =\u003e {\n  const [tags, setTags] = React.useState\u003cArray\u003cTag\u003e\u003e([\n    { id: 'Thailand', text: 'Thailand', className: '' },\n    { id: 'India', text: 'India', className: '' },\n    { id: 'Vietnam', text: 'Vietnam', className: '' },\n    { id: 'Turkey', text: 'Turkey', className: '' },\n  ]);\n\n  const handleDelete = (index: number) =\u003e {\n    setTags(tags.filter((_, i) =\u003e i !== index));\n  };\n\n  const onTagUpdate = (index: number, newTag: Tag) =\u003e {\n    const updatedTags = [...tags];\n    updatedTags.splice(index, 1, newTag);\n    setTags(updatedTags);\n  };\n\n  const handleAddition = (tag: Tag) =\u003e {\n    setTags((prevTags) =\u003e {\n      return [...prevTags, tag];\n    });\n  };\n\n  const handleDrag = (tag: Tag, currPos: number, newPos: number) =\u003e {\n    const newTags = tags.slice();\n\n    newTags.splice(currPos, 1);\n    newTags.splice(newPos, 0, tag);\n\n    // re-render\n    setTags(newTags);\n  };\n\n  const handleTagClick = (index: number) =\u003e {\n    console.log('The tag at index ' + index + ' was clicked');\n  };\n\n  const onClearAll = () =\u003e {\n    setTags([]);\n  };\n\n  return (\n    \u003cdiv className=\"app\"\u003e\n      \u003cGitHubCorner /\u003e\n\n      \u003ch1\u003e React Tags Example \u003c/h1\u003e\n      \u003cdiv\u003e\n        \u003cReactTags\n          tags={tags}\n          suggestions={suggestions}\n          separators={[SEPARATORS.ENTER, SEPARATORS.COMMA]}\n          handleDelete={handleDelete}\n          handleAddition={handleAddition}\n          handleDrag={handleDrag}\n          handleTagClick={handleTagClick}\n          onTagUpdate={onTagUpdate}\n          inputFieldPosition=\"bottom\"\n          editable\n          clearAll\n          onClearAll={onClearAll}\n          maxTags={7}\n        /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\nconst domNode = document.getElementById('app')!;\nconst root = createRoot(domNode);\n\nroot.render(\n  \u003cStrictMode\u003e\n    \u003cApp /\u003e\n  \u003c/StrictMode\u003e\n);\n\n\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/react-tags/react-tags/issues/new).\n\n\u003ca name=\"Options\"\u003e\u003c/a\u003e\n## Options\n\nOption | Type | Default | Description\n--- | --- | --- | ---\n|[`tags`](#tags) | `Array` | `[]` | An array of tags that are displayed as pre-selected.|\n|[`suggestions`](#suggestions) | `Array` | `[]` | An array of suggestions that are used as basis for showing suggestions.\n|[`delimiters`](#delimiters) | `Array` | `[13, 9]` | Specifies which characters keycode should terminate tags input. `[Deprecated]`, use [`separators`](#separators) instead.\n|[`separators`](#separators) | `Array` | `[\"Enter\", \"Tab\"]` | Specifies which characters should terminate tags input |\n|[`placeholder`](#placeholder) | `String` | `Add new tag` | The placeholder shown for the input.\n|[`labelField`](#labelField) | `String` | `text` | Provide an alternative `label` property for the tags.\n|[`handleAddition`](#handleAddition) | `Function` | `undefined` | Function called when the user wants to add a tag (required).\n|[`handleDelete`](#handleDelete) | `Function` | `undefined` | Function called when the user wants to delete a tag (required).\n|[`handleDrag`](#handleDrag) | `Function` | `undefined` | Function called when the user drags a tag.\n|[`handleFilterSuggestions`](#handleFilterSuggestions) | `Function` | `undefined` | Function called when filtering suggestions.\n|[`handleTagClick`](#handleTagClick) | `Function` | `undefined` | Function called when the user wants to know which tag was clicked.\n|[`autofocus`](#autofocus) | `Boolean` | `true` | Boolean value to control whether the text-input should be autofocused on mount. `[Deprecated]`, use [`autoFocus`](#autoFocus) instead.\n|[`autoFocus`](#autoFocus) | `Boolean` | `true` | Boolean value to control whether the text-input should be autofocused on mount.\n|[`allowDeleteFromEmptyInput`](#allowDeleteFromEmptyInput) | `Boolean` | `true` | Boolean value to control whether tags should be deleted when the 'Delete' key is pressed in an empty Input Box.\n|[`handleInputChange`](#handleInputChange) | `Function` | `undefined` | Event handler for input onChange.\n|[`handleInputFocus`](#handleInputFocus) | `Function` | `undefined` | Event handler for input onFocus.\n|[`handleInputBlur`](#handleInputBlur) | `Function` | `undefined` | Event handler for input onBlur.\n|[`minQueryLength`](#minQueryLength) | `Number` | `2` | How many characters are needed for suggestions to appear.\n|[`removeComponent`](#removeComponent) | `Function` |  | Function to render custom remove component for the tags.\n|[`autocomplete`](#autocomplete) | `Boolean`/`Number` | `false` | Ensure the first matching suggestion is automatically converted to a tag when a [separator](#separator) key is pressed.`[Deprecated]` and will be removed in v7.x.x, more info in [#949](https://github.com/react-tags/react-tags/issues/949)\n|[`readOnly`](#readOnly) | `Boolean` | `false` | Read-only mode without the input box and `removeComponent` and drag-n-drop features disabled.\n|[`name`](#name) | `String` | `undefined` | The `name` attribute added to the input.\n|[`id`](#id) | `String` | `undefined` | The `id` attribute added to the input.\n|[`maxLength`](#maxLength) | `Number` | `Infinity` | The `maxLength` attribute added to the input.\n|[`inline`](#inline) | `Boolean` | `true` | Render input field and selected tags in-line. `[Deprecated]`, use [`inputFieldPosition`](#inputFieldPosition) instead.\n|[`inputFieldPosition`](#inputFieldPosition) | `String` | `inline` | Specify position of input field relative to tags\n|[`allowUnique`](#allowUnique) | `Boolean` | `true` | Boolean value to control whether tags should be unqiue.\n|[`allowDragDrop`](#allowDragDrop) | `Boolean` | `true` | Implies whether tags should have drag-n-drop features enabled.\n|[`renderSuggestion`](#renderSuggestion) | `Function` | `undefined` | Render prop for rendering your own suggestions.\n| [`inputProps`](#inputProps) | Object |`{}` | The extra attributes which are passed to the input field. \n| [`allowAdditionFromPaste`](#allowAdditionFromPaste) | `boolean` | `true` | Implies whether to allow paste action when adding tags.|\n| [`editable`](#editable) | `boolean` | `false`| Implies whether the tags should be editable.|\n| [`onTagUpdate`](#onTagUpdate) | `Function` | | This callback if present is triggered when tag is edited.|\n|[`clearAll`](#clearAll) | `boolean` | `false` | Implies whether 'clear all' button should be shown.\n|[`onClearAll`](#onClearAll) | `Function` |  | This callback if present is triggered when clear all button is clicked.\n| [`maxTags`](#maxTags) | `number` | | The maximum count of tags to be added\n| [`ariaAttrs`](#ariaAttrs) | Object |`{clearAllLabel: \"clear all tags\"}` | An object containing custom ARIA attributes to enhance screen reader support and improve accessibility\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- `ReactTags__editTagInput`\n- `ReactTags__editTagInputField`\n- `ReactTags__clearAll`\n\nAn example can be found in [`/example/reactTags.scss`](https://github.com/react-tags/react-tags/blob/master/example/reactTags.scss).\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      editTagInput: 'editTagInputClass',\n      editTagInputField: 'editTagInputField',\n      clearAll: 'clearAllClass',\n    }}\n    ...\u003e\n```\n## Preparing for Migration to v7.x.x\n\nBelow are the list of `deprecated` props so please stop using it and migrate to the new props as these will be removed in `v7.x.x`.\nYou will see a warning for the migration as well in the console.\n\n- `delimiters` - Please use [`separators`](#separators) instead, more info in [this issue](https://github.com/react-tags/react-tags/issues/960).\n- `inline` - Please use [`inputFieldPosition`](#inputFieldPosition) instead.\n- `autofocus` - Please use [`autoFocus`](#autoFocus) instead.\n\nAdditionally the prop `autocomplete` is deprecated and will be removed in `v7.x.x`. If you have any concerns regarding this, please share your thoughts in [this issue](https://github.com/react-tags/react-tags/issues/949).\n\n\n## Support\nIf you like this library, please support it to contribute to its development :)\n\n[![Github-sponsors](https://img.shields.io/static/v1?label=Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026color=%23fe8e86)](https://github.com/sponsors/ad1992)\n\n\n## Dev\nThe component is written in ES6 and uses [Webpack](http://webpack.github.io/) as its build tool.\n\n## Set up instructions\n\nInstall yarn\n```\nnpm install -g yarn\n```\n\n```\ngit clone git@github.com:react-tags/react-tags.git\ncd react-tags\nyarn\nyarn precommit\nyarn start\n```\nopen [http://localhost:8090](http://localhost:8090)\n\n\n## Contributing\nGot ideas on how to make this better? Open an issue!\n\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/react-tags/react-tags/blob/v4.0.1/lib/ReactTags.js#L83\n[includes-polyfill]: https://github.com/mathiasbynens/String.prototype.includes\n\n\n### tags \nAn array of tags that are displayed as pre-selected. Each tag should have an `id` property, property for the label, which is specified by the [`labelField`](#labelFieldOption) and class for label, which is specified by `className`.\n\n```js\n// With default labelField\nconst tags =  [ { id: \"1\", text: \"Apples\" } ]\n\n// With labelField of `name`\nconst tags =  [ { id: \"1\", name: \"Apples\" } ]\n\n// With className\nconst tags = [ { id: \"1\", text: \"Apples\", className: 'red'} ]\n```\n### suggestions\nAn array of suggestions that are used as basis for showing suggestions. These objects should follow the same structure as the `tags`. So if the `labelField` is `name`, the following would work:\n\n```js\n// With labelField of `name`\nconst suggestions = [\n    { id: \"1\", name: \"mango\" },\n    { id: \"2\", name: \"pineapple\"},\n    { id: \"3\", name: \"orange\" },\n    { id: \"4\", name: \"pear\" }\n];\n\n```\n\n### delimiters\nThis prop is deprecated and will be removed in 7.x.x. Please use [`separators`](#separators) instead.\nSpecifies which characters should terminate tags input. An array of character codes. We export the constant `KEYS` for convenience. \n\n\n```js\nimport { WithContext as ReactTags, KEYS } from 'react-tag-input';\n\n\u003cReactTags\n    delimiters={[KEYS.TAB, KEYS.SPACE, KEYS.COMMA]}\n /\u003e\n```\n\n### separators\nSpecifies which characters should separate tags. An array of strings. We support the below separators :point_down:\n\n- `Enter`\n- `Tab`\n- `Space`\n- `Comma`\n- `Semicolon`\n\nAnd we export the constant `SEPERATORS` for convenience. \n\n\n```js\nimport { WithContext as ReactTags, SEPARATORS } from 'react-tag-input';\n\u003cReactTags\n    separators={[SEPARATORS.TAB, SEPARATORS.SPACE, SEPARATORS.COMMA]}\n /\u003e\n```\n\n### placeholder\nThe placeholder shown for the input.\n\n```js\nlet placeholder = \"Add new country\"\n```\n### labelField\nProvide an alternative `label` property for the tags.\n\n```jsx\n\u003cReactTags\n    tags={tags}\n    suggestions={}\n    labelField={'name'}\n    handleDrag={}\n /\u003e\n```\n\nThis is useful if your data uses the `text` property for something else.\n\n### handleAddition\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### handleDelete\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### handleDrag\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### handleFilterSuggestions\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\n### handleTagClick\nFunction called when the user wants to know which tag was clicked\n\n```js\nfunction(i) {\n    // use the tag details at index i\n}\n```\n\n### autofocus\nOptional boolean param to control whether the text-input should be autofocused on mount.\nThis prop is `deprecated` and will be removed in 7.x.x, please use `autoFocus` instead.\n\n```jsx\n\u003cReactTags\n    autofocus={false}\n    ...\u003e\n```\n\n### autoFocus\nOptional boolean param to control whether the text-input should be autofocused on mount.\n\n```jsx\n\u003cReactTags\n    autoFocus={false}\n    ...\u003e\n```\n\n### allowDeleteFromEmptyInput\nOptional boolean param to control whether tags should be deleted when the `Backspace` key is pressed in an empty Input Box. By default this prop is `false`. \n\nHowever when input field position is `inline`, you will be able to delete the tags by pressing `Backspace` irrespective of the value of this prop.\n\nThis prop will likely be removed in future versions.\n\n```js\n\u003cReactTags\n    allowDeleteFromEmptyInput={true}\n    ...\u003e\n```\n### handleInputChange\nOptional event handler for input onChange\n\n**Signature**\n\n```js\n(value, event) =\u003e void\n```\nThe value denotes the target input value to be added and the event is the original event for `onChange`.\n\n```js\n\u003cReactTags\n    handleInputChange={this.handleInputChange}\n    ...\u003e\n```\n\n\n### handleInputFocus\nOptional event handler for input onFocus\n\n```js\n\u003cReactTags\n    handleInputFocus={this.handleInputFocus}\n    ...\u003e\n```\n\n**Signature**\n\n```js\n(value, event) =\u003e void\n```\nThe value denotes the target input value to be added and the event is the original event for `onFocus`.\n\n### handleInputBlur\nOptional event handler for input onBlur\n\n**Signature**\n\n```js\n(value, event) =\u003e void\n```\nThe value denotes the target input value to be added and the event is the original event for `onBlur`.\n\n```js\n\u003cReactTags\n    handleInputBlur={this.handleInputBlur}\n    ...\u003e\n```\n\n### minQueryLength\nMinimum number of characters needed for suggestions to appear. Defaults to `2`.\n\n### removeComponent\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     const { className, onRemove } = this.props;\n      return (\n         \u003cbutton onClick={onRemove} className={className}\u003e\n            \u003cimg src=\"my-icon.png\" /\u003e\n         \u003c/button\u003e\n      )\n   }\n}\n```\nThe below props will be passed to the `removeComponent`. You will need to forward the relevant props to your custom remove component to make it work.\n\n| Name | Type  | Description |\n| --- | ---  | --- |\n| `className` | `string`  | The prop `classNames.remove` passed to the `ReactTags` component gets forwarded to the remove component. Defaults to `ReactTags__remove` |\n| `onRemove` | `Function` | The callback to be  triggered when tag is removed, you will need to pass this to the `onClick` handler of the remove component |\n|`onKeyDown` | `Function` | The callback to be triggered when keydown event occurs. You will need to pass this to `onKeyDown` handler of the remove component|\n| `aria-label` | string | The `aria-label` to be announced when the tag at an index is deleted |\n| `tag` | \u003cpre\u003e{ id?: string, className: string, key: string }\u003c/pre\u003e | The `tag` to be deleted.\n| `index` | number | the `index` of the tag to be deleted.\n\n\n### autocomplete\nThis prop is deprecated and will be removed in 7.x.x to simplify the integration and make it more intutive. If you have any concerns regarding this, please share your thoughts in https://github.com/react-tags/react-tags/issues/949.\n\nUseful for enhancing data entry workflows for your users by ensuring the first matching suggestion is automatically converted to a tag when a [separator](#separators) key is pressed (such as the enter key). This option has three possible values:\n\n- `true` - when separator key (such as enter) is pressed, first matching suggestion is used.\n- `1` - when separator 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/separator key press.\n\nThis option has no effect if there are no [`suggestions`](#suggestionsOption).\n\n### readOnly\nRenders the component in read-only mode without the input box and `removeComponent`. This also disables the drag-n-drop feature.\n\n### name\nThe name attribute added to the input.\n\n```\n\u003cReactTags\n    name = \"inputName\"\n    ...\u003e\n```\n### id\nThe id attribute added to the input.\n\n```\n\u003cReactTags\n    id = \"inputId\"\n    ...\u003e\n```\n\n### maxLength\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### inline\nThe inline attributes decides whether the input fields and selected tags will be rendered in-line.\n\n```\n\u003cReactTags\n    inline\n    ...\u003e\n```\n\n![img](docs/inline-true.png)\n\n```\n\u003cReactTags\n    inline={false}\n    ...\u003e\n```\n\n![img](docs/inline-false.png)\n\n_This attribute is deprecated and will be removed in v7.x.x, see [inputFieldPosition](#inputFieldPosition)._\n\n### inputFieldPosition\nThe inputFieldPosition attribute decides the positioning of the input field relative to the tags. Can be one of `inline`, `top` or `bottom`.\n\n```\n\u003cReactTags\n    inputFieldPosition=\"inline\"\n    ...\u003e\n```\n\n![img](docs/input-field-position-inline.png)\n\n```\n\u003cReactTags\n    inputFieldPosition=\"top\"\n    ...\u003e\n```\n\n![img](docs/input-field-position-top.png)\n\n```\n\u003cReactTags\n    inputFieldPosition=\"bottom\"\n    ...\u003e\n```\n\n![img](docs/input-field-position-bottom.png)\n\n\n### allowUnique \nThis prop controls whether tags should be unique.\n\n### allowDragDrop\nThis prop controls whether tags should have the drag-n-drop feature enabled.\n\n\n### renderSuggestion\nThis props allows to provide your own suggestion renderer and override the default one. It receives the suggestion and the query string as parameters. For example:\n\n```\n\u003cReactTags\n    renderSuggestion = {({ text }, query) =\u003e \u003cdiv style={{ textDecoration: 'underline', textDecorationStyle: 'wavy' }}\u003e{text} ({ query })\u003c/div\u003e}\n    ...\u003e\n```\n\n### inputProps\n\nWhen you want to pass additional attributes to the input element (for example autocomplete, disabled etc) you can use this prop. \n\n```js\n\u003cReactTags\n  inputProps = {{\n    disabled: true,\n    autocomplete: \"off\"\n  }}\n/\u003e\n```\n\n### allowAdditionFromPaste\n\nThis prop implies whether to allow paste action for adding tags. Defaults to `true`.\n\n\n### editable\n\nThis prop implies whether the tags should be editable. Defaults to `false`.\n\n\n### onTagUpdate\n\n```js\nonTagUpdate(editIndex, tag) =\u003e void;\n```\nThis callback is if present is triggered when tag is updated. The edit index and the tag are passed in the callback. You can update the [`tags`](#tags) prop in this callback.\n\n### clearAll\n\nThis props implies whether 'clear all' button should be shown. Defaults to `false`.\n\n\n### onClearAll\nThis callback is if present is triggered when \"clear all\" button is clicked. You can set the [`tags`](#tags) prop to empty in this callback.\n\n### maxTags\nThis prop specifies the maximum count of tags to be added. Incase the tags exceed, error will show up to convey the maximum tag limit has reached.\n\n### ariaAttrs\n\nAn object containing custom ARIA attributes to enhance screen reader support and improve accessibility. \nIt accepts the below attributes\n```js\n{\n  clearAllLabel?: string // Optional accessible label for a \"clear all tags\" button improving accessibility by providing a clear, descriptive action label.\n}\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-tags%2Freact-tags","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-tags%2Freact-tags","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-tags%2Freact-tags/lists"}