_____
|_ _|___ ___ ___ ___ ___
| | | .'| . | . | -_| _|
|_| |__,|_ |_ |___|_|
|___|___| version 0.6.2
npm install @jcubic/tagger
or
yarn add @jcubic/tagger
tagger(document.querySelector('[name="tags"]'), {allow_spaces: false});
Multiple inputs can be created by passing a NodeList or array of elements (eg. document.querySelectorAll()). If only one element is contained in the list then tagger will return the tagger instance, an array of tagger instances will be returned if the number of elements is greater than 1.
Tagger can easily be used with ReactJS.
import { useRef, useState, useEffect } from 'react'
import tagger from '@jcubic/tagger'
const App = () => {
const [tags, setTags] = useState([]);
const inputRef = useRef(null);
useEffect(() => {
const taggerOptions = {
allow_spaces: true,
};
tagger(inputRef.current, taggerOptions);
onChange();
}, [inputRef]);
const onChange = () => {
setTags(tags_array(inputRef.current.value));
};
return (
<div className="app">
<input type="text" ref={inputRef} onChange={onChange} defaultValue="charles, louis, michel" />
<br/>
<ul>
{tags.map((tag, index) => <li key={`${tag}-${index}`}>{tag}</li>)}
</ul>
</div>
)
}
function tags_array(str) {
return str.split(/\s*,\s*/).filter(Boolean);
}
export default App
See demo in action on CodePen.
add_tag(string): boolean
remove_tag(string): booelan
complete(string): void
{list: string[] | function(): Promise(string[])|string[], delay: miliseconds, min_length: number}
function(name): string|false
it should return what should be in href attribute or falsenumber
(default -1) limit number of tags, when set to -1 there are no limitsstring
(default unset) If set in options or on the initial input, this placeholder value will be shown in the tag entry inputfunction(name): string
it should return the tag name after applying any filters (eg String.toUpperCase()), empty string to filter out tag and prevent creation.NOTE: if you're familiar with TypeScript you can check the API by looking at TypeScript definition file:
Copyright (c) 2018-2024 Jakub T. Jankiewicz Released under the MIT license