How to make use of it:

1. Install and import the Taggier.

# NPM
$ npm i Taggier --save

import Taggier from 'Taggier';
// or
import Taggier from './taggier.js';

2. Create a container to hold the tag input.

<div id="taggier"></div>

3. Initialize the Taggier on the container aspect and accomplished it.

const taggier = new Taggier('taggier');

4. Stylize the tags with your individual CSS.

.tag {
  background-color: #5A67D8;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 5px;
  color: #fff;
}

.tag:hover {
  filter: brightness(95%);
  transition: all .1s ease;
}

.tag::after {
  content: ' \00d7';
}

.tag:hover::after {
  color: #F7FAFC;
}

5. Get the tags you simply typed.

taggier.tags.forEach(tag => {
  // ...
});
// or
taggier.getTags()

6. Specify the space between tags.

const taggier = new Taggier('taggier',{
      gap: 20
});

7. Add # to every tag. Ideal for hashtags.

const taggier = new Taggier('taggier',{
      hashtag: true
});

8. Customize the border of the tag input. Setting to false will conceal the border.

const taggier = new Taggier('taggier',{
      border: false
});

9. Determine whether or not to disable sure characters utilizing Regex. Setting to false will disable the function.

const taggier = new Taggier('taggier',{
      forbiddenPattern: '/[^\w]+/g'
});

Easy Clean Tag & Hashtag Input, Taggier Plugin/Github, object javascript get value

See Demo And Download