react-tag-input-component-kr
v2.0.5
Published
lightweight component for tag(s) input kr
Downloads
21
Maintainers
Readme
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
📜 License
MIT © harshzalavadiya