Download do tagger - Download do código -fonte tagger

tagger

Outros recursos

0.6.2

Baixar

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

Tagger: dependência zero, editor de tags de baunilha JavaScript

Demonstração online

Instalação

 npm install @jcubic/tagger

ou

 yarn add @jcubic/tagger

Uso

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

Várias entradas podem ser criadas passando uma lista de nodel ou matriz de elementos (por exemplo, document.QuerySelectorAll ()). Se apenas um elemento estiver contido na lista, o tagger retornará a instância do tagger, uma matriz de instâncias de tagger será retornada se o número de elementos for maior que 1.

Uso com React

O tagger pode ser facilmente usado com o 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

Veja a demonstração em ação no Codepen.

API

Métodos:

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

Opções:

Wrap (padrão false) permita que as tags envolvam novas linhas em vez de rolagem de transbordamento
allow_duplicates (padrão false)
Allow_spaces (padrão true)
add_on_blur (padrão false)
conclusão {list: string[] | function(): Promise(string[])|string[], delay: miliseconds, min_length: number}
Função de link function(name): string|false deve retornar o que deve ser no atributo href ou false
Tag_limit number (padrão -1) Número limite de tags, quando definido como -1 não há limites
string de espaço reservado (padrão não definido) Se definido nas opções ou na entrada inicial, esse valor de espaço reservado será mostrado na entrada de tags de entrada
Função de filtro function(name): string Deve retornar o nome da tag após aplicar qualquer filtro (por exemplo, string.TOUPCASE ()), String vazio para filtrar a tag e impedir a criação.