Unread-Messages.js is a lightweight library that lets a user add mobile-like notification counter badge to any object with just one wrapper.

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

npm i unreadmessages --save

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>

Include the main css file a and javascript file. To initiate the, library two things are required, first a class of notification-container needs to be added to a wrapper element and the val data attribute needs to be defined inside of that element and you're done. If the data attribute is left empty it the displayed value will default to 0. To better illustrate the use of the library we'll be using FontAwesome icons as content for the wrappers.

  <div class="notification-container" data-val="">
        <i class="fas fa-bell" style="font-size: 45px;"></i>
  </div>

To fit the values with a reasonable size any value above 999 is displayed in a short-hand form. The displayed numbers shorthand follows the following convention

• Any count 1000 and over like 1800 will be formated as 1.8k

• Any value 1000000 and over like 1200,000 will be displayed as 1.2M

In addition to the data-val data attribute there are other attributes that can be used to further customize the badge.

The position of the badge can be changed using the data-pos data attribute. If this attribute is not defined the badge position will default to top-right.

  <div class="notification-container" data-val="5" data-pos="bottom-left">
      <i class="fas fa-bell" style="font-size: 45px;"></i>
  </div>

You can also change the colors of the number tags by simply adding a data-val data attribute to your wrapper. Any color css-supported color name works as well as RGB values. If this attribute is not defined the badge will default to red.

  <div class="notification-container" data-val="5" data-color="blue">
    <i class="fas fa-bell" style="font-size: 45px;"></i>
  </div>

You can decide how you want the badge to persist after mouse clicks by using the data-select-hide data attribute by default it is set to true but it can optionally explicitly set data-select-hide="false". This data attribute can also be set to false or False if you want the badge to persist after mouse clicks.

<div class="notification-container" data-val="5" data-select-hide="false">
    <i class="fas fa-bell" style="font-size: 45px;"></i>
  </div>

You will find that after setting the data-select-hide attribute to false, you will no longer be able to dismiss the displayed tag with a mouse click.