@pymatech/react-tag-input NPM

react-tag-input

A Bootstrap v4 CSS compatible tag input component for React

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

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} />

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

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}

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago