tagly v1.0.2
Tagly
Tagly is a tag input component in which provides lots of features and easiness.
Table of Contents
Features
- 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
Installation
npm install --save tagly
Usage
import {Tagly} from 'tagly'
var tagly = new Tagly({
...options
})
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 |
mixed (optional, defaults to true
)
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 (optional, defaults to true
)
Duplicate option allows or disallows tags to be created more than one.
defaultValue (optional, defaults to ""
)
Preferred value to be inserted as a starting value.
allowedTags (optional, defaults to []
)
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"
}]
}
readOnly (optional, defaults to true
)
Either you can edit tag by double clicking or they just stay as it is.
containerClassName (optional, defaults to undefined
)
Tagly will be inserted specified containerClassName.
changeHandler (optional, defaults to undefined
)
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
}
Methods
Name | Parameters | Description |
---|---|---|
addExternalTag | String tag to add | Injects Text or Tag last saved caret position |
addExternalTag
Tag will be inserted at last saved caret position.
var tagly = new Tagly({
...options
})
tagly.addExternalTag('tagToBeAdded')