Badge Tags.js

About

BadgeTags.js is a javascript library that helps turn your flagged keywords into mobile badge tags.

Install

NPM

To install this package with NPM run the command below and link the needed javascript and css into your html file.

npm i badgetags --save

Direct Download

To use this package you need to link the needed javascript and css into your html file.

  <link rel="stylesheet" href="/src/css/style.css">

Because the library looks over the the page content for specific classes, place the script tag at the bottom of your HTML file or add the defer keyword to the tag, so the script will load after the HTML content.

  <script src="/src/js/main.js"></script>

How To Use

Create a div with your desired words in it starting with a # value by adding the data-badge-tags data attribute and giving it a value of active.

NOTE: all words not starting with the # hash sign will not displayed as badges.

  <div data-badge-tags="active">
      I was in #Florida all #weekend at the #beach.    
  </div>

In a separate javascript file create an instance of the the BadgeTags class. And you're done.

// Tags Instance
const tags = new BadgeTags();

API

The tags class object takes one object witch is used to change the apperance and functionality of the created badge tags.

Background Color

The backgroundColor property is used to assign a single background color to all badge tags. The property accepts RGB colors, HEX colors as-well as css supported named colors. The property defaults to #f0f0f0 if no value is defined.

// Props object
const props = {
    backgroundColor: "#ff4a9d", // pink
    textColor: 'white'
}

Text Color

The textColor property is used to assign a single text color to all badge tags. The property accepts RGB colors, HEX colors as-well as css supported named colors. The property defaults to grey if no value is defined.

// Props object
const props = {
    textColor: "#d53eff" // purple
}

Shape

The shape property is used to change the border radius of the badge tags. The property currently only accepts two values pill and box.If no value is assigned the property value defaults to pill.

const props = {
    shape: 'box',
}

Border Color

The borderColor property is used to assign a single text color to all badge tags. The property accepts RGB colors, HEX colors as-well as css supported named colors. The property defaults to transparent if no value is defined.

// Props object
const props = {
    borderColor: "#00d9ba" // teal
}

Click Callback

The callback property is used to assign a single callback function to all badge tags fired on the click event.

// Callback function
function hey(event){
  console.log(`${target.event.innerHTML} 🔥`);
};

// Props object
const props = {
    callback: hey
}

// Tags Instance
const tags = new BadgeTags(props);