https://github.com/hc-oss/react-tag-input-component
lightweight react component for tag(s) input
https://github.com/hc-oss/react-tag-input-component
hacktoberfest input lightweight react tag tags tiny
Last synced: 6 months ago
JSON representation
lightweight react component for tag(s) input
- Host: GitHub
- URL: https://github.com/hc-oss/react-tag-input-component
- Owner: hc-oss
- License: mit
- Created: 2020-12-14T18:11:28.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-16T15:29:34.000Z (over 1 year ago)
- Last Synced: 2024-05-01T15:59:07.950Z (over 1 year ago)
- Topics: hacktoberfest, input, lightweight, react, tag, tags, tiny
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-tag-input-component-rgf97
- Size: 438 KB
- Stars: 75
- Watchers: 3
- Forks: 32
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 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 (
Add Fruits
{JSON.stringify(selected)}
press enter or comma to add new tag
);
};
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)