tagger

Tagger: Zero Dependency, Vanilla JavaScript Tag Editor
Tagger is a lightweight and efficient tag editor implemented in vanilla JavaScript, designed without external dependencies for ease of integration. This project draws inspiration from the tag editor used by StackOverflow, intended for use in a similar Q&A website that never came to fruition.

Features

• Simple Setup: Tagger can be easily implemented in any JavaScript project.
• Multiple Input Support: Create multiple tag inputs using a NodeList or an array of elements.
• Flexible Options: Control tag behavior with various options, including tag limits, duplicate tags, and placeholder text.
• Reactive Support: Integrate seamlessly with frameworks like ReactJS for dynamic tag management.

Quick Usage

To utilize Tagger in a project:

tagger(document.querySelector('[name="tags"]'), {allow_spaces: false});  

Example in React

Tagger can be integrated into a React application easily:

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;  

Explore a live demo on CodePen.

API Reference

• Methods:

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

• Options:

  • wrap: Allows tags to wrap onto new lines (default: false)
  • allow_duplicates: Enable duplicate tags (default: false)
  • allow_spaces: Allow spaces in tags (default: true)
  • completion: Configuration for tag suggestions
  • and more.

For a comprehensive overview, consider reviewing the TypeScript definition file: tagger.d.ts.

Featured In

Tagger has been highlighted in various publications including:

• JavaScript Weekly: Issue #527 & Issue #652
• Web Tools Weekly: Issue #396
• CSS Script: Minimal Tagging Input In Pure JavaScript – Tagger
• Frontend Focus: #657

Tagger offers a simple yet powerful solution for incorporating tagging functionality into web applications.