react-tag-input-component

lightweight component for tag(s) input

also see multi select component

✨ Features

• 🍃 Lightweight (2KB including styles 😎)
• 💅 Themeable
• ✌ Written w/ TypeScript
• 🗑️ Use Backspace to remove last tag

🔧 Installation

npm i react-tag-input-component    # npm
yarn add react-tag-input-component # yarn

📦 Example

import React, { useState } from "react";
import { TagsInput } from "react-tag-input-component";

const Example = () => {
  const [selected, setSelected] = useState(["papaya"]);

  return (
    <div>
      <h1>Add Fruits</h1>
      <pre>{JSON.stringify(selected)}</pre>
      <TagsInput
        value={selected}
        onChange={setSelected}
        name="fruits"
        placeHolder="enter fruits"
      />
      <em>press enter or comma to add new tag</em>
    </div>
  );
};

export default Example;

👀 Props

| Prop | Description | Type | Default | | ------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------- | --------------- | | name | value for name of input | string | | | placeholder | placeholder for text input | string | | | value | initial tags | string[] | [] | | onChange | onChange callback (added/removed) | string[] | | | classNames | className for styling input and tags (i.e {tag:'tag-cls', input: 'input-cls'}) | object[tag, input] | | | onKeyUp | input onKeyUp callback | event | | | onBlur | input onBlur callback | event | | | separators | when to add tag (i.e. "Enter", " ") | string[] | ["Enter"] | | removers | Remove last tag if textbox empty and Backspace is pressed | string[] | ["Backspace"] | | onExisting | if tag is already added then callback | (tag: string) => void | | | onRemoved | on tag removed callback | (tag: string) => void | | | beforeAddValidate | Custom validation before adding tag | (tag: string, existingTags: string[]) => boolean | | | isEditOnRemove | Remove the tag but keep the word in the input to edit it on using Backscape Key | boolean | false |

💅 Themeing

You can override CSS variables to customize the appearance

.rti--container {
  --rti-bg: "#fff",
  --rti-border: "#ccc",
  --rti-main: "#3182ce",
  --rti-radius: "0.375rem",
  --rti-s: "0.5rem", /* spacing */
  --rti-tag: "#edf2f7",
  --rti-tag-remove: "#e53e3e",
}

use !important if CSS variables are not getting applied

🤠 Credits

• TypeScript
• TSDX
• Goober

📜 License

MIT © harshzalavadiya