# Tag Input Library
Simple library for managing tags. Written in vanilla JS without any library dependencies

# Installation
Install Tag Input JS using [`yarn`](https://yarnpkg.com/en/package/jest):

```bash
yarn add tag-input-js
```

Or via [`npm`](https://www.npmjs.com/):

```bash
npm install --save tag-input-js
```

Or include CDN link in HTML page:

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

# Usage
```jsx
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

```js
{
  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

```HTML
<!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
```bash
npm run build
```

## Tests
```bash
npm run start
npm run test
```

# License
MIT
