react-tag-input-component
Version:
lightweight component for tag(s) input
101 lines (76 loc) • 5 kB
Markdown
# react-tag-input-component
lightweight component for tag(s) input
[](https://github.com/harshzalavadiya/react-tag-input-component/actions)
[](https://npm.im/react-tag-input-component)
[](https://bundlephobia.com/result?p=react-tag-input-component@latest)
also see [multi select component](https://github.com/harshzalavadiya/react-multi-select-component)
## ✨ Features
- 🍃 Lightweight (2KB including styles 😎)
- 💅 Themeable
- ✌ Written w/ TypeScript
- 🗑️ Use Backspace to remove last tag
## 🔧 Installation
```bash
npm i react-tag-input-component # npm
yarn add react-tag-input-component # yarn
```
## 📦 Example
[](https://codesandbox.io/s/react-tag-input-component-rgf97?fontsize=14&hidenavigation=1&theme=dark)
```tsx
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
```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
## 🤠 Credits
- [TypeScript](https://github.com/microsoft/typescript)
- [TSDX](https://github.com/jaredpalmer/tsdx)
- [Goober](https://github.com/cristianbote/goober)
## 📜 License
MIT © [harshzalavadiya](https://github.com/harshzalavadiya)