Raterjs-Ratings

Overview Official Website

Rater js is the best star rater for the browser. No dependencies. Unlimited number of stars.

Javascript

<!-- rater-js plugin -->
<script src="{% static 'libs/rater-js/index.js'%}"></script>

Initjs (Custom js)

<!-- rating init -->
<script src="{% static 'js/pages/rating.init.js'%}"></script>

Add Package

yarn add rater-js --save

Remove Package

yarn remove rater-js or you can remove package by removing specific package from package.json

Examples

Title	Javascript
Basic Rater	`if (document.querySelector('#basic-rater')) var basicRating = raterJs( { starSize:22, rating: 3, element:document.querySelector("#basic-rater"), rateCallback:function rateCallback(rating, done) { this.setRating(rating); done(); } });`
Rater with Step	`var starRatingStep = raterJs( { starSize:22, rating:1.5, element:document.querySelector("#rater-step"), rateCallback:function rateCallback(rating, done) { this.setRating(rating); done(); } });`
Custom Messages	if (document.querySelector('#rater-step')) var messageDataService = { rate:function(rating) { return {then:function (callback) { setTimeout(function () { callback((Math.random() * 5)); }, 1000); } } } } if (document.querySelector('#rater-message')) var starRatingmessage = raterJs( {isBusyText:"Rating in progress. Please wait...", starSize:22, element:document.querySelector("#rater-message"), rateCallback:function rateCallback(rating, done) { starRatingmessage.setRating(rating); messageDataService.rate().then(function (avgRating) { starRatingmessage.setRating(avgRating); done(); }); }});
Example with unlimited number of stars. readOnly option is set to true	`var starRatingunlimited = raterJs( { max:16, readOnly:true, rating:4.4, element:document.querySelector("#rater-unlimitedstar") });`
On Hover Event	`if (document.querySelector('#rater-unlimitedstar')) var starRatinghover = raterJs( { starSize:22, rating: 1, element:document.querySelector("#rater-onhover"), rateCallback:function rateCallback(rating, done) { this.setRating(rating); done(); }, onHover:function(currentIndex, currentRating) { document.querySelector('.ratingnum').textContent = currentIndex; }, onLeave:function(currentIndex, currentRating) { document.querySelector('.ratingnum').textContent = currentRating; } });`
Clear/Reset Rater	`var starRatingreset = raterJs( { starSize:22, rating: 2, element:document.querySelector("#raterreset"), rateCallback:function rateCallback(rating, done) { this.setRating(rating); done(); } }); document.querySelector('#raterreset-button').addEventListener("click", function() { starRatingreset.clear(); console.log(starRatingreset.getRating()); }, false);`