{"id":14886,"library":"react-tag-input","title":"React Tag Input","description":"React Tag Input is a comprehensive and user-friendly tagging component designed for React applications, currently stable at version 6.10.6. It offers robust features such as autocomplete based on a suggestion list, full keyboard and mouse navigation, drag-and-drop tag reordering powered by `react-dnd`, and in-place tag editing. The library is actively maintained with frequent patch and minor releases, and version 7 is currently in preparation. A key differentiator is its focus on accessibility and a user experience inspired by email 'To' fields, providing a flexible solution for managing tag inputs in various UI contexts.","status":"active","version":"6.10.6","language":"javascript","source_language":"en","source_url":"https://github.com/react-tags/react-tags","tags":["javascript","react","drag-drop","tags","tag input","react-component","autosuggest","editable","typescript"],"install":[{"cmd":"npm install react-tag-input","lang":"bash","label":"npm"},{"cmd":"yarn add react-tag-input","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-tag-input","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library for UI component rendering.","package":"react","optional":false},{"reason":"DOM-specific rendering helpers for React.","package":"react-dom","optional":false},{"reason":"Provides drag-and-drop functionality for reordering tags.","package":"react-dnd","optional":false},{"reason":"HTML5 backend for react-dnd, enabling standard drag-and-drop interactions.","package":"react-dnd-html5-backend","optional":false}],"imports":[{"note":"The primary component is exported as `WithContext` and typically aliased to `ReactTags` for usage. Attempting a default import will fail.","wrong":"import ReactTags from 'react-tag-input';","symbol":"ReactTags (aliased)","correct":"import { WithContext as ReactTags } from 'react-tag-input';"},{"note":"`SEPARATORS` is a named export providing predefined key codes for adding tags. CommonJS `require` is generally not recommended in modern React projects.","wrong":"const SEPARATORS = require('react-tag-input').SEPARATORS;","symbol":"SEPARATORS","correct":"import { SEPARATORS } from 'react-tag-input';"},{"note":"For TypeScript users, the `Tag` interface is essential for type-checking tag objects. It should be imported as a type to avoid runtime errors if not also exported as a value.","wrong":"import { Tag } from 'react-tag-input';","symbol":"Tag (type)","correct":"import type { Tag } from 'react-tag-input';"}],"quickstart":{"code":"import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { WithContext as ReactTags, SEPARATORS } from 'react-tag-input';\nimport type { Tag } from 'react-tag-input'; // Assuming type Tag is exported directly\n\nconst COUNTRIES = [\n  'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Antigua and Barbuda',\n  'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain',\n  'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bhutan',\n];\n\nconst suggestions = COUNTRIES.map((country) => ({\n  id: country,\n  text: country,\n  className: '',\n}));\n\nconst KeyCodes = {\n  comma: 188,\n  enter: [10, 13],\n};\n\nconst App = () => {\n  const [tags, setTags] = React.useState<Array<Tag>>([\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) => {\n    setTags(tags.filter((_, i) => i !== index));\n  };\n\n  const onTagUpdate = (index: number, newTag: Tag) => {\n    const updatedTags = [...tags];\n    updatedTags.splice(index, 1, newTag);\n    setTags(updatedTags);\n  };\n\n  const handleAddition = (tag: Tag) => {\n    setTags((prevTags) => [...prevTags, tag]);\n  };\n\n  const handleDrag = (tag: Tag, currPos: number, newPos: number) => {\n    const newTags = tags.slice();\n    newTags.splice(currPos, 1);\n    newTags.splice(newPos, 0, tag);\n    setTags(newTags);\n  };\n\n  const handleTagClick = (index: number) => {\n    console.log('The tag at index ' + index + ' was clicked');\n  };\n\n  const onClearAll = () => {\n    setTags([]);\n  };\n\n  return (\n    <div className=\"app\">\n      <h1>React Tags Example</h1>\n      <p>Start typing to see suggestions. Use Enter or Comma to add tags. Click to edit, drag to reorder.</p>\n      <ReactTags\n        tags={tags}\n        suggestions={suggestions}\n        handleDelete={handleDelete}\n        handleAddition={handleAddition}\n        handleDrag={handleDrag}\n        handleTagClick={handleTagClick}\n        onTagUpdate={onTagUpdate}\n        onClearAll={onClearAll}\n        delimiters={KeyCodes.enter.concat(KeyCodes.comma)}\n        placeholder=\"Add new tags...\"\n        inputFieldPosition=\"bottom\"\n        autocomplete\n        allowUnique\n      />\n      <div style={{ marginTop: '20px' }}>\n        <h3>Current Tags:</h3>\n        <ul>\n          {tags.map(tag => (\n            <li key={tag.id}>{tag.text}</li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  );\n};\n\nconst container = document.getElementById('root');\nif (container) {\n  const root = createRoot(container);\n  root.render(<App />);\n} else {\n  console.error('Root element not found');\n}","lang":"typescript","description":"This quickstart demonstrates how to set up `react-tag-input` with initial tags and suggestions, handling tag additions, deletions, updates, drags, and clicks, along with a 'clear all' functionality."},"warnings":[{"fix":"Monitor the official GitHub repository for the v7 release and consult the provided migration guide for smooth upgrading.","message":"Version 7 (v7.xx) is currently in preparation and is expected to introduce breaking changes. Refer to the migration guide when upgrading.","severity":"breaking","affected_versions":">=6.10.0 (upcoming v7)"},{"fix":"Replace `autofocus={true}` with `autoFocus={true}` in your component usage.","message":"The `autofocus` prop was deprecated in v6.10.0 in favor of `autoFocus` (camelCase). Using `autofocus` will result in warnings and may be removed in future versions.","severity":"deprecated","affected_versions":">=6.10.0"},{"fix":"Ensure all peer dependencies are installed: `npm install --save react react-dom react-dnd react-dnd-html5-backend` (check specific version ranges).","message":"The package has mandatory peer dependencies on `react`, `react-dom`, `react-dnd`, and `react-dnd-html5-backend`. Failing to install these (or installing incompatible versions) will prevent the component from functioning correctly, especially drag-and-drop.","severity":"gotcha","affected_versions":">=6.0.0"},{"fix":"Upgrade to `react-tag-input@6.10.4` or newer to resolve issues with Korean input handling.","message":"Prior to version 6.10.4, Korean input could trigger the `keydown` event twice, leading to incorrect or duplicate tag input behavior.","severity":"gotcha","affected_versions":"<6.10.4"},{"fix":"Upgrade to `react-tag-input@6.10.4` or newer to ensure correct handling of `className` and `classNames`.","message":"In earlier v6 versions (before 6.10.3/6.10.4), there were issues with the `className` and `classNames` props not being correctly typed or passed to the DOM, potentially affecting styling and accessibility.","severity":"gotcha","affected_versions":"<6.10.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install --save react-tag-input react react-dom react-dnd react-dnd-html5-backend` or `yarn add react-tag-input react react-dom react-dnd react-dnd-html5-backend`.","cause":"The `react-tag-input` package or one of its peer dependencies is not installed or incorrectly referenced in your project.","error":"Module not found: Can't resolve 'react-tag-input'"},{"fix":"Verify that `react-dnd` and `react-dnd-html5-backend` are installed with compatible versions (`^14.0.2 || ^16.0.0` for `react-dnd`, `^14.0.0 || ^16.0.0` for `react-dnd-html5-backend`). Ensure your component tree is wrapped with `DndProvider` if you are using a custom setup, though `react-tag-input` often handles this internally via `WithContext`.","cause":"This error typically indicates that `react-dnd` or its `html5-backend` peer dependency is missing or not correctly set up, which `react-tag-input` requires for drag-and-drop functionality.","error":"TypeError: Cannot read properties of undefined (reading 'Provider')"},{"fix":"Update your code to use `autoFocus={true}` instead of `autofocus={true}`.","cause":"You are using the deprecated `autofocus` prop (lowercase 'f') with TypeScript, which now expects `autoFocus` (camelCase 'F'). This was changed in v6.10.0.","error":"Property 'autofocus' does not exist on type 'IntrinsicAttributes & ...'"},{"fix":"Ensure your tags have truly unique `id` properties. If you're on an older version and experiencing UI inconsistencies with `allowUnique`, upgrade to `react-tag-input@6.7.1` or newer to benefit from improved suggestion filtering.","cause":"The `allowUnique` prop prevents tags with existing IDs from being added. Before v6.7.1, it would not properly hide suggestions for existing tags, leading to confusion.","error":"Tag is not being added when `allowUnique` is true, but it looks new."}],"ecosystem":"npm"}