0.2.1 • Published 5 years ago
wh-rating v0.2.1
Wheat House Rating
A simple vanilla JS web component used to create a rating experience for the end user.
Installation
npm install wh-rating
Usage
<wh-rating id="rating" value="25" number-of-icons="5"></wh-rating>
The initial value and number of icons can be specified as inputs. The default values are 0 and 5 respectively.
To catch an event, add a change event listener to the wh-rating element and inspect the target's value to get the percentage of the rating.
var $whRating = document.getElementById('wh-rating');
$whRating.addEventListener('change', (event) => {
console.log('Got change: ' + event.target.value);
});
Optionally, you may specify that the value defaults to the nearest whole rating value. For example, with 5 icons, the rating will default to a multiple of 20 rather than an exact percentage based on the user's input.
<wh-rating id="rating" use-multiples></wh-rating>
Styling the hearts into another unicode icon is easy to do. Using CSS, you can overwrite the default heart icon.
<style>
@charset "UTF-8";
wh-rating {
--wh-rating-symbol: "♥";
}
</style>