React Tag Input

Common errors

• Module not found: Can't resolve 'react-tag-input'

  cause The `react-tag-input` package or one of its peer dependencies is not installed or incorrectly referenced in your project.
  fix Run `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')

  cause 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.
  fix Verify 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 & ...'

  cause You are using the deprecated `autofocus` prop (lowercase 'f') with TypeScript, which now expects `autoFocus` (camelCase 'F'). This was changed in v6.10.0.
  fix Update your code to use `autoFocus={true}` instead of `autofocus={true}`.

• Tag is not being added when `allowUnique` is true, but it looks new.

  cause 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.
  fix Ensure 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.

Warnings

• breaking Version 7 (v7.xx) is currently in preparation and is expected to introduce breaking changes. Refer to the migration guide when upgrading.
  Fix: Monitor the official GitHub repository for the v7 release and consult the provided migration guide for smooth upgrading.
• deprecated The `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.
  Fix: Replace `autofocus={true}` with `autoFocus={true}` in your component usage.
• gotcha The 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.
  Fix: Ensure all peer dependencies are installed: `npm install --save react react-dom react-dnd react-dnd-html5-backend` (check specific version ranges).
• gotcha Prior to version 6.10.4, Korean input could trigger the `keydown` event twice, leading to incorrect or duplicate tag input behavior.
  Fix: Upgrade to `react-tag-input@6.10.4` or newer to resolve issues with Korean input handling.
• gotcha In 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.
  Fix: Upgrade to `react-tag-input@6.10.4` or newer to ensure correct handling of `className` and `classNames`.

Install

• npm install react-tag-input npm
• yarn add react-tag-input yarn
• pnpm add react-tag-input pnpm

Imports

• ReactTags (aliased)
  wrong:

  import ReactTags from 'react-tag-input';

  correct:

  import { WithContext as 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
  wrong:

  const SEPARATORS = require('react-tag-input').SEPARATORS;

  correct:

  import { SEPARATORS } from 'react-tag-input';

  `SEPARATORS` is a named export providing predefined key codes for adding tags. CommonJS `require` is generally not recommended in modern React projects.
• Tag (type)
  wrong:

  import { Tag } from 'react-tag-input';

  correct:

  import type { 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.

Quickstart

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');
}