Registry / web-framework / react-tagsinput

react-tagsinput

library3.20.3jsnpmunverified

`react-tagsinput` is a highly customizable React component designed for creating user interfaces that allow users to input and manage tags. It is currently at version 3.20.3, indicating a mature and stable codebase. While an explicit release cadence isn't regularly published, the package appears to be in a maintenance phase, receiving updates primarily for compatibility and bug fixes rather than frequent feature additions. Its key differentiators include extensive customization options through `renderTag`, `renderInput`, and `renderLayout` props, enabling developers to fully control the visual representation of tags and the input field. It supports various methods for adding tags, such as pressing `Enter` or `Tab`, blurring the input field, and pasting text, along with options for validation and enforcing unique tags. The component is agnostic to styling, requiring developers to provide their own CSS (or import the provided basic stylesheet) to match their application's design system.

web-framework

npm install react-tagsinput

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-TAGSINPUT

react-tagsinput

web-frameworkjavascriptv3.20.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

TagsInput

✓ import TagsInput from 'react-tagsinput'

✗ import { TagsInput } from 'react-tagsinput'

TagsInput is a default export, not a named export.

CSS Stylesheet

✓ import 'react-tagsinput/react-tagsinput.css'

The component does not bundle its styles; explicit import of the stylesheet is required for basic styling.

CommonJS require

✓ const TagsInput = require('react-tagsinput')

While primarily an ESM library, it still provides a CommonJS build for Node.js environments. Ensure your bundler handles it correctly.

Demonstrates basic usage of `react-tagsinput` with functional components, state management using `useState`, and essential styling.

import React from 'react'; import TagsInput from 'react-tagsinput'; import 'react-tagsinput/react-tagsinput.css'; // Don't forget to import the styles! function App() { const [tags, setTags] = React.useState(['react', 'javascript']); const handleChange = (newTags) => { setTags(newTags); }; return ( <div> <h1>My Tag Editor</h1> <p>Add some tags related to your project:</p> <TagsInput value={tags} onChange={handleChange} maxTags={10} addOnBlur={true} onlyUnique={true} inputProps={{ placeholder: 'Add a new tag' }} tagProps={{ className: 'react-tagsinput-tag', classNameRemove: 'react-tagsinput-remove' }} /> <p>Current tags: {tags.join(', ')}</p> </div> ); }

Debug

Known issues

breakingVersion 3.0.0 and above of `react-tagsinput` requires React 16.8 or newer due to internal updates using modern React APIs. Prior versions of React will not be compatible.

fix

Upgrade your React installation to version 16.8 or newer. If upgrading React is not an option, you must use a `react-tagsinput` version prior to 3.0.0 (e.g., `^2.x.x`).

affects: >=3.0.0

breakingThe `renderInput` prop's signature changed in v3.0.0. It now receives only a `props` object, rather than `(props, getInputProps)`. Custom implementations will need to be updated.

fix

Refactor custom `renderInput` functions to accept a single `props` argument: `(props) => { /* ... */ }`.

affects: >=3.0.0

breakingThe `renderTag` prop's signature was updated in v3.0.0 to use a destructured object `{ tag, key, onRemove, getTagProps }`. Existing custom `renderTag` implementations will break.

fix

Refactor custom `renderTag` functions to accept the new destructured object signature: `({ tag, key, onRemove, getTagProps }) => { /* ... */ }`.

affects: >=3.0.0

breaking`react-autocomplete` was removed as a dependency in v2.0.0, meaning built-in autocompletion functionality is no longer available. Users upgrading from v1.x.x must implement autocompletion externally.

fix

Implement custom autocompletion logic using a separate component, or integrate a third-party autocomplete library, as `react-tagsinput` no longer provides this feature.

affects: >=2.0.0

gotchaThe component does not include its default styling automatically. You must explicitly import the provided CSS file (`react-tagsinput/react-tagsinput.css`) for the component to render with basic styles.

fix

Add `import 'react-tagsinput/react-tagsinput.css';` to your application's entry point or relevant component file. Alternatively, provide your own custom CSS classes.

affects: >=1.0.0

gotchaTo implement a controlled input field within `TagsInput` using `inputValue`, you must also provide an `onChangeInput` handler. If `onChangeInput` is missing, the input field will not allow user interaction.

fix

Ensure that whenever `inputValue` is set, an `onChangeInput` prop is also provided to update the input's value, adhering to React's controlled component pattern.

affects: >=3.0.0

gotchaBy default, the `onlyUnique` prop is `false`, allowing duplicate tags to be added. If your application requires unique tags, this prop must be explicitly set to `true`.

fix

Set the `onlyUnique={true}` prop on the `TagsInput` component to prevent the addition of duplicate tags.

affects: >=1.0.0

Errors

Common errors & fixes

Error: TagsInput requires a onChange prop

The `onChange` prop, essential for updating the list of tags, was not provided to the `TagsInput` component.

fix

Ensure `TagsInput` receives an `onChange` prop, a function that updates the component's state with the new array of tags.

Warning: Failed prop type: The prop `value` is marked as required in `TagsInput`, but its value is `undefined`.

The `value` prop, which is an array of tags, was not provided or was `undefined`.

fix

Pass an array (even an empty one) to the `value` prop of the `TagsInput` component.

Tags are not visually appearing or styling incorrectly.

The default stylesheet for `react-tagsinput` was not imported, or custom styles are overriding it unexpectedly.

fix

Add `import 'react-tagsinput/react-tagsinput.css';` to your main application file or the component where `TagsInput` is used. Inspect browser developer tools to check for conflicting styles.

Input field does not update when typing, even though `inputValue` is set.

When `inputValue` is used to control the input, the `onChangeInput` prop is also required to handle input changes. If missing, the input remains static.

fix

Provide an `onChangeInput` function to the `TagsInput` component alongside `inputValue`. This function should update the state that `inputValue` reads from.

Uncaught TypeError: Cannot read properties of undefined (reading 'setState')

This error often occurs in class components when event handlers (like `onChange`) lose their `this` context. The `this` keyword inside `handleChange` might not refer to the component instance.

fix

Ensure `handleChange` is an arrow function or is explicitly bound in the constructor (`this.handleChange = this.handleChange.bind(this);`) to maintain the correct `this` context.

Upgrade

Version history

3.20.3latest on npm

Audit

Dependencies

reactrequiredPeer dependency for the React component. Supports React versions 15 through 18.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/olahol/react-tagsinput ↗

packagehttps://www.npmjs.com/package/react-tagsinput ↗