Get support for jcubic/tagger

If you're new to LTH, please see our FAQ for more information on what it is we do.

Qualified Helpers
jcubic
owner From $50 / 30 mins
Get help from jcubic

jcubic/tagger

  _____
 |_   _|___ ___ ___ ___ ___
   | | | .'| . | . | -_|  _|
   |_| |__,|_  |_  |___|_|
           |___|___|   version 0.6.1

Tagger: Zero dependency, Vanilla JavaScript Tag Editor

npm

Tag Editor widget in JavaScript

Online Demo

Installation

npm install @jcubic/tagger

or

yarn add @jcubic/tagger

Usage

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.

Usage with React

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.

API

methods:

  • add_tag(string): boolean
  • remove_tag(string): booelan
  • complete(string): void

Options:

  • wrap (default false) allow tags to wrap onto new lines instead of overflow scroll
  • allow_duplicates (default false)
  • allow_spaces (default true)
  • add_on_blur (default false)
  • completion {list: string[] | function(): Promise(string[])|string[], delay: miliseconds, min_length: number}
  • link function(name): string|false it should return what should be in href attribute or false
  • tag_limit number (default -1) limit number of tags, when set to -1 there are no limits
  • placeholder string (default unset) If set in options or on the initial input, this placeholder value will be shown in the tag entry input
  • filter function(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:

tagger.d.ts

Press

License

Copyright (c) 2018-2023 Jakub T. Jankiewicz Released under the MIT license

Our Mission

We want to make open source more sustainable. The entire platform was born from this and everything we do is in aid of this.

Interesting Articles

Thank you for checking out LiveTechHelper |
2024 © lth-dev incorporated

p-e622a1a2