Tagly is a tag input component in which provides lots of features and easiness.
Vanilla 🙌 React

Table of Contents

• Features
• Installation
• Usage
• Options
• Methods
• React wrapper

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

const defaultValue = "{javascript} is more fun with {typescript}" //or ['typescript', 'javascript']

tagly.initWithValue(defaultValue);

If default value specified as array, all of them will be treated as tag value which makes sense in tag-only input. In mixed, you better specify default values as string.

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
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.

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 to last saved caret position

addExternalTag

Tag will be inserted at last saved caret position.

var tagly = new Tagly({
  ...options
})

tagly.addExternalTag('tagToBeAdded')

React

import React, {useRef} from 'react';
import {TaglyReact} from 'tagly'

function App(){
const tagly = useRef(null)


return (
	<div> 
		<TaglyReact 
			innerRef={tagly}
			containerClassName="myContainer"
			duplicate={false}
			mixed={true}
			defaultValue={'{typescript}'}
			allowedTags=
			{[
				{label: 'JavaScript', value: 'javascript'},
				{label: 'TypeScript', value: 'typescript'},
				{label: 'Python', value: 'python'},
			]}
				onChange={newValue => {
					console.log(newValue)
				}}
				readOnly={false}
		/>
	</div>
	)
}