tagger Download - tagger Code Source Télécharger

tagger

Autres ressources

0.6.2

Télécharger

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

Tagger: zéro dépendance, éditeur de balise JavaScript Vanilla

Démo en ligne

Installation

 npm install @jcubic/tagger

ou

 yarn add @jcubic/tagger

Usage

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

Plusieurs entrées peuvent être créées en passant un nodeliste ou un tableau d'éléments (par exemple, document.QuerySelectorAll ()). Si un seul élément est contenu dans la liste, Tagger renvoie l'instance Tagger, un tableau d'instances Tagger sera retournée si le nombre d'éléments est supérieur à 1.

Utilisation avec réact

Tagger peut facilement être utilisé avec 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

Voir démo en action sur Codepen.

API

Méthodes:

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

Options:

Wrap (par défaut faux) permet aux étiquettes de s'envelopper sur de nouvelles lignes au lieu de déborder de débordement
allow_duplicate (par défaut false)
perte_spaces (par défaut True)
add_on_blur (par défaut false)
Achèvement {list: string[] | function(): Promise(string[])|string[], delay: miliseconds, min_length: number}
Fonction de lien function(name): string|false il doit renvoyer ce qui devrait être dans l'attribut HREF ou false
number tag_limit (par défaut -1) Limite Nombre de balises, lorsqu'il est défini sur -1, il n'y a pas de limites
string d'espace réservé (par défaut unset) Si définie dans les options ou sur l'entrée initiale, cette valeur d'espace réservé sera affichée dans l'entrée de l'entrée de balise
Fonction de filtre function(name): string Il doit renvoyer le nom de balise après avoir appliqué des filtres (par exemple String.ToupperCase ()), vide String pour filtrer la balise et empêcher la création.