lightweight component for tag(s) input
npm install react-tag-input-componentlightweight component for tag(s) input



also see multi select component
- 🍃 Lightweight (2KB including styles 😎)
- 💅 Themeable
- ✌ Written w/ TypeScript
- 🗑️ Use Backspace to remove last tag
``bash`
npm i react-tag-input-component # npm
yarn add react-tag-input-component # yarn

`tsx
import React, { useState } from "react";
import { TagsInput } from "react-tag-input-component";
const Example = () => {
const [selected, setSelected] = useState(["papaya"]);
return (
{JSON.stringify(selected)}export default Example;
`
| 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 |
You can override CSS variables to customize the appearance
`css`
.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
- TypeScript
- TSDX
- Goober
MIT © harshzalavadiya