lightweight component for tag(s) input
also see multi select component
- 🍃 Lightweight (2KB including styles 😎)
- 💅 Themeable
- ✌ Written w/ TypeScript
- 🗑️ Use Backspace to remove last tag
npm i react-tag-input-component # npm
yarn add react-tag-input-component # yarn
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;
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"] |
separatorsByKeyCode |
when to add tag by keyCode (i.e. 13 for Enter key). When this option is set, separators will be ignored. |
number[] |
[] |
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
.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
MIT © harshzalavadiya