Modern Rating Component as Web Component Built with Stencil.js

The rating component is generated using a Stencil.js. This is our first experiment to generate truly web component which can work in any framework or in vanilla javascript also. Stencil.js provides so much handy tooling and APIs which makes building web-components so easy and fun. Infect Stencil.js adds required polyfill also and that way it runs on almost all mobile and desktop browsers.
Before we move further I would like to give credit to Lea Verou for inspiring me on this topic.

Why another Rating Component?

Ok, so currently there are many open source rating components. But all of them just built with selected and not selected star image. Also its really hard to make them responsive and size it as per our exact requirement. Mostly not supporting auto height and width. Then again we can’t build a rating component with just our own drawn SVG. And most importantly, those rating components never showing so accurate result like “4.25 out of 5”.

In this component, we can set rating icons using two ways :
1.  Set icons as a unicode text icon, eg `♥`, `♠`, `♣`
2.  Provide SVG URL to set it as rating icon

Here I will also cover on using Font-Awesome icon.

So let’s see how to use it and what are the options we can set.

Installation:

npm i @logisticinfotech/rating-component

We can also directly use it by importing javascript

<script src="https://unpkg.com/@logisticinfotech/[email protected]/dist/li-rating.js">
</script>

 Usage examples:

<li-rating
id="liRatingDefault" 
 text-icon="❖"
 svgIconPath="url for svg" // If text-icon set, then ignored
 fillMode="half" // full, half, precise(Default)
 font-size="45" // required for text-icon
 total-icons="3" 
 stroke-color="rgb(255, 102, 229)"
 stroke-width="1" 
 color="rgb(255, 153, 255)"
 opacity="0.3"
 value="1.5"
></li-rating>

Available options are :

1) fillMode (Optional) string : This option changes rating value as per the given mode. There are three modes are available `full`, `half` and `precise`. Default value is `precise`.

Available Event :

=> input : This event will be called when we change the rate in rating component.

Available Method :

=> How to subscribe to rate change event

document.getElementById('yourElementId')
 .addEventListener('input', event => {
        console.log('change rate =>' ,event);
  });

=> How to use setSvgString method to pass svg as string

var liRating = document.getElementById('yourElementId');
liRating.componentOnReady().then(() => {
    liRating.setSvgString(svgHtml);
});

Using font-awesome icon as a rating component icon

As we have seen, we have option to pass SVG as a string to li-rating component.
So if we can find a way to get font-awesome icon as SVG string, then we just need to pass it to our rating component via above method. Well we already found a way.
So firstly, we need to import font-awesome as SVG,

<script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js">
</script>

Now with little bit of javascript we will extract icon as SVG string and pass it to our rating meter.

var smileBeam = window.FontAwesome.icon({
  prefix: 'fas',
  iconName: 'smile-beam'
}).html[0];

var liRating = document.getElementById('liRatingFontAwesome');
liRating.componentOnReady().then(() => {
  liRating.setSvgString(smileBeam);
});

And that’s it, you should have smile font-awesome icon settled.

Here is live working example of it.

Here is open source GitHub repo also. Looking forward to get feedbacks from community.
Feel free to report bugs and request features.