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[] |
|
onBlur |
input onBlur callback |
event |
|
seprators |
when to add tag (i.e. Space ,Enter ) |
string[] |
["Enter"] |
onExisting |
if tag is already added then callback | (tag: string) => void |
|
onRemoved |
on tag removed callback | (tag: string) => void |
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