quigebo/tagger

Zero Dependency, Vanilla JavaScript Tag Editor

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

Tagger: Zero dependency, Vanilla JavaScript Tag Editor

Online Demo

Installation

npm install @jcubic/tagger

or

yarn add @jcubic/tagger

Usage

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

Usage with React

Tagger can easily be used with ReactJS.

import { useRef, useState, useEffect } from 'react'
import tagger from '@jcubic/tagger'

function App() {
  const [tags, setTags] = useState(null)
  const inputRef = useRef(null)

  // Get current tags
  const getTags = () => {
    setTags(inputRef.current.value)
  }

  // Write the Tagger code inside a useEffect hook
  // It will run when the component is initially rendered
  useEffect(() => {
    // Define the Tagger options
    const taggerOptions = {
      allow_spaces: true,
    }

    // Initialize Tagger
    tagger(inputRef.current, taggerOptions)
  }, [])

  return (
    <div className='app'>
      <input type='text' defaultValue='charles, louis, michel' ref={inputRef} />
      <button onClick={getTags}>Get tags</button>

      {tags && <pre>{tags}</pre>}
    </div>
  )
}

export default App

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

NOTE: if you're familiar with TypeScript you can check the API by looking at TypeScript definition file:

tagger.d.ts

Changelog

0.4.4

• fix wrapping issues #30 thanks to James Lucas

0.4.3

• Fix completion on Safari #7

0.4.2

• Fix autocomplete #22

0.4.1

• fix typescript definition for completion

0.4.0

• [Breaking] value in input no longer have space after comma
• fix updating input when deleting tag using backspace
• add option add_on_blur
• add option tag_limit

0.3.1

• fix npm package

0.3.0

• add wrap option
• fix remove_tag API
• make settings optional
• add typescript types

0.2.3

• fix ambiguous tags

0.2.2

• reject empty tags

0.2.1

• Fix remove_tag when links are disabled

0.2.0

• link option
• working completion
• allow to use querySelectorAll etc.

0.1.3

• fix inialization in UMD

0.1.2

• fix bug in adding tags

0.1.1

• fix initalization of tags from input

0.1.0

• initial version

License

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