Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
ReactTags (aliased)
✓ import { WithContext as ReactTags } from 'react-tag-input';
✗ import ReactTags from 'react-tag-input';
The primary component is exported as `WithContext` and typically aliased to `ReactTags` for usage. Attempting a default import will fail.
SEPARATORS
✓ import { SEPARATORS } from 'react-tag-input';
✗ const SEPARATORS = require('react-tag-input').SEPARATORS;
`SEPARATORS` is a named export providing predefined key codes for adding tags. CommonJS `require` is generally not recommended in modern React projects.
Tag (type)
✓ import type { Tag } from 'react-tag-input';
✗ import { Tag } from 'react-tag-input';
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.
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.
import React from 'react';
import { createRoot } from 'react-dom/client';
import { WithContext as ReactTags, SEPARATORS } from 'react-tag-input';
import type { Tag } from 'react-tag-input'; // Assuming type Tag is exported directly
const COUNTRIES = [
'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Antigua and Barbuda',
'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain',
'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bhutan',
];
const suggestions = COUNTRIES.map((country) => ({
id: country,
text: country,
className: '',
}));
const KeyCodes = {
comma: 188,
enter: [10, 13],
};
const App = () => {
const [tags, setTags] = React.useState<Array<Tag>>([
{ id: 'Thailand', text: 'Thailand', className: '' },
{ id: 'India', text: 'India', className: '' },
{ id: 'Vietnam', text: 'Vietnam', className: '' },
{ id: 'Turkey', text: 'Turkey', className: '' },
]);
const handleDelete = (index: number) => {
setTags(tags.filter((_, i) => i !== index));
};
const onTagUpdate = (index: number, newTag: Tag) => {
const updatedTags = [...tags];
updatedTags.splice(index, 1, newTag);
setTags(updatedTags);
};
const handleAddition = (tag: Tag) => {
setTags((prevTags) => [...prevTags, tag]);
};
const handleDrag = (tag: Tag, currPos: number, newPos: number) => {
const newTags = tags.slice();
newTags.splice(currPos, 1);
newTags.splice(newPos, 0, tag);
setTags(newTags);
};
const handleTagClick = (index: number) => {
console.log('The tag at index ' + index + ' was clicked');
};
const onClearAll = () => {
setTags([]);
};
return (
<div className="app">
<h1>React Tags Example</h1>
<p>Start typing to see suggestions. Use Enter or Comma to add tags. Click to edit, drag to reorder.</p>
<ReactTags
tags={tags}
suggestions={suggestions}
handleDelete={handleDelete}
handleAddition={handleAddition}
handleDrag={handleDrag}
handleTagClick={handleTagClick}
onTagUpdate={onTagUpdate}
onClearAll={onClearAll}
delimiters={KeyCodes.enter.concat(KeyCodes.comma)}
placeholder="Add new tags..."
inputFieldPosition="bottom"
autocomplete
allowUnique
/>
<div style={{ marginTop: '20px' }}>
<h3>Current Tags:</h3>
<ul>
{tags.map(tag => (
<li key={tag.id}>{tag.text}</li>
))}
</ul>
</div>
</div>
);
};
const container = document.getElementById('root');
if (container) {
const root = createRoot(container);
root.render(<App />);
} else {
console.error('Root element not found');
}
Debug
Known issues
breakingVersion 7 (v7.xx) is currently in preparation and is expected to introduce breaking changes. Refer to the migration guide when upgrading.fixMonitor the official GitHub repository for the v7 release and consult the provided migration guide for smooth upgrading.
affects: >=6.10.0 (upcoming v7)
deprecatedThe `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.fixReplace `autofocus={true}` with `autoFocus={true}` in your component usage. affects: >=6.10.0
gotchaThe 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.fixEnsure all peer dependencies are installed: `npm install --save react react-dom react-dnd react-dnd-html5-backend` (check specific version ranges).
affects: >=6.0.0
gotchaPrior to version 6.10.4, Korean input could trigger the `keydown` event twice, leading to incorrect or duplicate tag input behavior.fixUpgrade to `react-tag-input@6.10.4` or newer to resolve issues with Korean input handling.
affects: <6.10.4
gotchaIn 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.fixUpgrade to `react-tag-input@6.10.4` or newer to ensure correct handling of `className` and `classNames`.
affects: <6.10.4
Errors
Common errors & fixes
Module not found: Can't resolve 'react-tag-input'
The `react-tag-input` package or one of its peer dependencies is not installed or incorrectly referenced in your project.
fixRun `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`.
TypeError: Cannot read properties of undefined (reading 'Provider')
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.
fixVerify 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`.
Property 'autofocus' does not exist on type 'IntrinsicAttributes & ...'
You are using the deprecated `autofocus` prop (lowercase 'f') with TypeScript, which now expects `autoFocus` (camelCase 'F'). This was changed in v6.10.0.
fixUpdate your code to use `autoFocus={true}` instead of `autofocus={true}`. Tag is not being added when `allowUnique` is true, but it looks new.
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.
fixEnsure 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.
Audit
Dependencies
reactrequiredCore React library for UI component rendering.
react-domrequiredDOM-specific rendering helpers for React.
react-dndrequiredProvides drag-and-drop functionality for reordering tags.
react-dnd-html5-backendrequiredHTML5 backend for react-dnd, enabling standard drag-and-drop interactions.