tag-input-js

v0.0.4

Published

3 years ago

Input control for entering tags

Downloads

0High
0Medium
0Low

vespaiach

tag tag input input tag

Tag Input Library

Simple library for managing tags. Written in vanilla JS without any library dependencies

Installation

Install Tag Input JS using yarn:

yarn add tag-input-js

Or via npm:

npm install --save tag-input-js

Or include CDN link in HTML page:

<script src="https://unpkg.com/tag-input-js@version/dist/index.js" type="text/javascript"></script>

Usage

import TagInputControl from 'tag-input-js';

const tagInstance = new TagInputControl(elementId | HTMLElement, options)

Parameters

elementId

string

This is ID of HTML element that will host Tag Input Control

HTMLElement

HTMLElement

This is element instance of HTML element that will host Tag Input Control

options

Object | optional

{
  cssClass : {
    tagPanel: 'tagi__panel',        // class name of tag panel
    tagElement: 'tagi__element',    // class name of each tag
    inputElement: 'tagi__input' .   // class name of input control
  },
  renderRemoveButton: function(){},  // return custom remove button
  initialTags: [],                   // list of tags will be shown on initial time
  onTagChange: function(tagList){}   // callback function will be execute everytime tag list changes
}

Example

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Tag Input - Example</title>
  <script src="https://unpkg.com/[email protected]/dist/index.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/styles.css" />
</head>

<body>
  <div id="app"></div>
  <script>
    function handleTagChange(tags) {
      // get the lastest tag list everytime tags changes
    }
    var tagInstance = new TagInputControl('app', { initialTags: ['initial tag'] , onTagChange: handleTagChange })
  </script>
</body>

</html>

Contribute

That will be great if you pull requests and help the code better

Build

npm run build

Tests

npm run start
npm run test

License

MIT