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