{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-tagsinput"],"cli":null},"imports":["import TagsInput from 'react-tagsinput'","import 'react-tagsinput/react-tagsinput.css'","const TagsInput = require('react-tagsinput')"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}