React-tag-input-component NPM

react-tag-input-component

lightweight component for tag(s) input

✨ 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

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",
}