0.0.4 • Published 6 years ago
tag-input-js v0.0.4
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-jsOr via npm:
npm install --save tag-input-jsOr 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/tag-input-js@0.0.2/dist/index.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://unpkg.com/tag-input-js@0.0.2/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 buildTests
npm run start
npm run testLicense
MIT