Tagify

lightweight, efficient Tags input component in Vanilla JS / React / Angular...

Plugin / form widgetReactAngularVue
yairEO/tagifyyaireo.github.io/tagify/@yaireo/tagify

README

Tagify


Installation


Option 1 - import from CDN:


Place these lines before any other code which is (or will be) using Tagify (Example here)
  1. ```html
  2. <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
  3. <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
  4. <link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
  5. ```

Tagify will then be available globally.
To load specific version use @ - for example: unpkg.com/@yaireo/tagify@3.1.0

option 2 - import as a Node module:

  1. ```sh
  2. npm i @yaireo/tagify --save
  3. ```

Basic Usage Examples


- Many demos with code examples can be seen here
- CodeSandbox live demo



  1. ```js
  2. import Tagify from '@yaireo/tagify'

  4. var inputElem = document.querySelector('input') // the 'input' element which will be transformed into a Tagify component
  5. var tagify = new Tagify(inputElem, {
  6.   // A list of possible tags. This setting is optional if you want to allow
  7.   // any possible tag to be added without suggesting any to the user.
  8.   whitelist: ['foo', 'bar', 'and baz', 0, 1, 2]
  9. })
  10. ```

The above example shows the most basic whitelist array setting possible, with a mix
of Strings and Numbers but the array also support Objects whic a must-have property of value:

  1. ```js
  2. whitelist: [{value: 'foo', id: '123', email: 'foo@whatever.com'}, ...]
  3. ```

The value property is what will be used when actually defining the value property of the original input element (inputElem in the example above) which was transformed
into a Tagify component, and so when the form data is sent to the server, it will contain all the values (which are the selected tags in the component).

For selected tags to show a different text than what is defined in value for a whitelist item, see the tagTextProp setting.

⚠️ Important:
Don't forget to include tagify.css file in your project.
CSS location: @yaireo/tagify/dist/tagify.css
SCSS location: @yaireo/tagify/src/tagify.scss
See SCSS usecase & example

Debugging

There are several places in the source code which emits console.warn logs to help identify issues.
Those will only work if Tagify.logger.enabled flag is set to true.
To disable the default logging, set the following global variable:


  1. ```js
  2. window.TAGIFY_DEBUG = false

  4. var tagify = new Tagify(...)
  5. ```