Skip to content

Latest commit

 

History

History
102 lines (78 loc) · 5.27 KB

README.md

File metadata and controls

102 lines (78 loc) · 5.27 KB

react-tag-input-component

lightweight component for tag(s) input

GitHub Actions Status NPM gzip

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

Example

Edit react-tag-input-component

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. Space,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
multipleValues Using multiple values per tag boolean false
numberOfValuesPerTag The number of values a tag can have, if 'multipleValues' is true number

💅 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