react-tag-input

A Bootstrap v4 CSS compatible tag input component for React

Installation

npm install --save @pymatech/react-tag-input

How to use

Import the component where you wish to use it

import TagInput from "@pymatech/react-tag-input"

Basic syntax for the component

<TagInput className="form-control form-group" placeholder="Enter tags..." allowAddNew={true} />

Notes

• Duplicate tags are disallowed
• Pressing <ENTER> will attempt to add a tag
• Pressing the separator will attempt to add a tag
• On leaving the form field any partially entered tag name will be cleared
• Pressing <ENTER> when no input is partially entered will allow a form to submit

Props

| Prop | Description | Default value | Example | | ------------------- | :---------------------------------------------------------------------: | :----------------------: | :------------------------------: | | allowNewTags | If true tag creation is allowed, otherwise existing tags must be used | false | true | | className | CSS classes to apply to the outer element | empty string | form-control | | defaultValue | Initial value used to populate the tags | empty string | Dodge Ford Chevy | | onChange | Handler that receives the updated string value of the tags | undefined | { (value) => console.log(value)} | | placeholder | Text to display when there are no tags | empty string | Enter tags... | | separator | Separator to be used between items in the value prop | " " | "," | | tags | List of accepted tags | undefined | ["Dodge","Ford","Chevy"] | | emptyTagListMessage | Message to display when the tag list dropdown is empty | "No items found" | "No car makes found..." | | truncateTagMenuAt | Truncate the dropdown at x items and show that more items are available | undefined | {10} |