Tagly is a tag input component in which provides lots of features and easiness.
- Supports mixed (tags and text) and tag-only input
- Allows read-only prop for tags
- Disallows duplicated tags
- Supports tag insertion from external events
- Even Tagly loses focuses, external tags can be added wherever your caret is
- Supports allowed-tags (whitelist)
- Tags can be editable
npm install --save tagly
import {Tagly} from 'tagly'
var tagly = new Tagly({
...options
})
Option | Type | Default | Description |
---|---|---|---|
mixed |
Boolean |
true |
Input mode whether it is tag and text together or tag-only |
duplicate |
Boolean |
true |
Boolean value to control whether multiple same tag is allowed or not |
defaultValue |
Array/String |
"" |
Default Tags/Texts as starting values |
allowedTags |
Array |
[] |
Specifies which tags are allowed on input |
readOnly |
Boolean |
true |
Boolean value to enable whether tags can be editable or not |
containerClassName |
String |
undefined |
A container class name where tagly will append to |
changeHandler |
Function |
undefined |
Function called when tag input change which returns parsed input values |
Input behavior can be changed by "mixed" option. Either it can be used with tag and text together or it could be utilized as tag-only.
Tags are created with curly braces {string}
in mixed mode. When it is false, tags are added pressing Enter.
Duplicate option allows or disallows tags to be created more than one.
Preferred value to be inserted as a starting value.
A whitelist in which only specified tag data will be represented as tag. If a tag data does not exist in list, it will be treated as a string. Tagly does not accept any kind of data structure. It must contain label and value.
const options = {
//...options
allowedTags = [{
label: "First Tag", value:"first_tag",
label: "Second Tag", value: "second_tag"
}]
}
Either you can edit tag by double clicking or they just stay as it is.
Tagly will be inserted specified containerClassName.
A change listener which will be fired any change to the input value has occured. It has one string parameter
const changeHandler = (newValues) => {
...do something
}
const options = {
//...options
changeHandler
}
Name | Parameters | Description |
---|---|---|
addExternalTag |
String tag to add |
Injects Text or Tag last saved caret position |
Tag will be inserted at last saved caret position.
var tagly = new Tagly({
...options
})
tagly.addExternalTag('tagToBeAdded')