{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-tag-input"],"cli":null},"imports":["import { WithContext as ReactTags } from 'react-tag-input';","import { SEPARATORS } from 'react-tag-input';","import type { Tag } from 'react-tag-input';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}