{"id":11878,"library":"react-tagsinput","title":"React Tags Input Component","description":"`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.","status":"active","version":"3.20.3","language":"javascript","source_language":"en","source_url":"https://github.com/olahol/react-tagsinput","tags":["javascript","react","tags","input","component","react-component"],"install":[{"cmd":"npm install react-tagsinput","lang":"bash","label":"npm"},{"cmd":"yarn add react-tagsinput","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-tagsinput","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the React component. Supports React versions 15 through 18.","package":"react","optional":false}],"imports":[{"note":"TagsInput is a default export, not a named export.","wrong":"import { TagsInput } from 'react-tagsinput'","symbol":"TagsInput","correct":"import TagsInput from 'react-tagsinput'"},{"note":"The component does not bundle its styles; explicit import of the stylesheet is required for basic styling.","symbol":"CSS Stylesheet","correct":"import 'react-tagsinput/react-tagsinput.css'"},{"note":"While primarily an ESM library, it still provides a CommonJS build for Node.js environments. Ensure your bundler handles it correctly.","symbol":"CommonJS require","correct":"const TagsInput = require('react-tagsinput')"}],"quickstart":{"code":"import React from 'react';\nimport TagsInput from 'react-tagsinput';\n\nimport 'react-tagsinput/react-tagsinput.css'; // Don't forget to import the styles!\n\nfunction App() {\n  const [tags, setTags] = React.useState(['react', 'javascript']);\n\n  const handleChange = (newTags) => {\n    setTags(newTags);\n  };\n\n  return (\n    <div>\n      <h1>My Tag Editor</h1>\n      <p>Add some tags related to your project:</p>\n      <TagsInput\n        value={tags}\n        onChange={handleChange}\n        maxTags={10}\n        addOnBlur={true}\n        onlyUnique={true}\n        inputProps={{ placeholder: 'Add a new tag' }}\n        tagProps={{\n          className: 'react-tagsinput-tag',\n          classNameRemove: 'react-tagsinput-remove'\n        }}\n      />\n      <p>Current tags: {tags.join(', ')}</p>\n    </div>\n  );\n}","lang":"javascript","description":"Demonstrates basic usage of `react-tagsinput` with functional components, state management using `useState`, and essential styling."},"warnings":[{"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`).","message":"Version 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.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Refactor custom `renderInput` functions to accept a single `props` argument: `(props) => { /* ... */ }`.","message":"The `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.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Refactor custom `renderTag` functions to accept the new destructured object signature: `({ tag, key, onRemove, getTagProps }) => { /* ... */ }`.","message":"The `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.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Implement custom autocompletion logic using a separate component, or integrate a third-party autocomplete library, as `react-tagsinput` no longer provides this feature.","message":"`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.","severity":"breaking","affected_versions":">=2.0.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"To 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.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Set the `onlyUnique={true}` prop on the `TagsInput` component to prevent the addition of duplicate tags.","message":"By 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`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `TagsInput` receives an `onChange` prop, a function that updates the component's state with the new array of tags.","cause":"The `onChange` prop, essential for updating the list of tags, was not provided to the `TagsInput` component.","error":"Error: TagsInput requires a onChange prop"},{"fix":"Pass an array (even an empty one) to the `value` prop of the `TagsInput` component.","cause":"The `value` prop, which is an array of tags, was not provided or was `undefined`.","error":"Warning: Failed prop type: The prop `value` is marked as required in `TagsInput`, but its value is `undefined`."},{"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.","cause":"The default stylesheet for `react-tagsinput` was not imported, or custom styles are overriding it unexpectedly.","error":"Tags are not visually appearing or styling incorrectly."},{"fix":"Provide an `onChangeInput` function to the `TagsInput` component alongside `inputValue`. This function should update the state that `inputValue` reads from.","cause":"When `inputValue` is used to control the input, the `onChangeInput` prop is also required to handle input changes. If missing, the input remains static.","error":"Input field does not update when typing, even though `inputValue` is set."},{"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.","cause":"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.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'setState')"}],"ecosystem":"npm"}