Rater Js
rater-js is a star rating widget for the browser.
Main features:
- Unlimited number of stars.
- Svg as background image makes it look good in any size.
- Custom css. Use your own image as star.
- RTL support.
- Touch support.
Installation
npm install rater-js --save
Usage
rater-js can be used with amd, commonjs or without any module loader using global scope.
In your html create an element that acts as the placeholder for the widget.
<div id="rater"></div>Global scope
Directly reference the js from the module
<!--Add js before end body tag-->
<script src="node-modules/rater-js/index.js"></script>The widget will be available globally as "raterJs" on the window object.
Node/Browserify
Just require the module.
var rater = require("rater-js");Lastly we can use the widget like this:
var myRater = rater({element: document.querySelector("#rater"), rateCallback: function rateCallback(rating, done) {
//make async call to server however you want
//in this example we have a 'service' that rate and returns the average rating
myDataService.rate(rate).then(function(avgRating) {
//update the avarage rating with the one we get from the server
myRater.setRating(avgRating);
//we could disable the rater to prevent another rating
//if we dont want the user to be able to change their mind
myRater.disable();
//dont forget to call done
done();
}, function(error) {
//handle the error
//dont forget to call done
done();
});
}});Css will be injected at runtime, but you can override the css to get the look you want.
//change the whole image used as the star. Make sure to set starSize in options if not 16px.
//first image is for the 'off' mode
.star-rating {
background: url("myStar_off.svg") !important;
}
//add style for 'on' mode
.star-rating .star-value{
background: url("myStar_on.svg") !important;
}Configuration
| Property | Description |
|---|---|
| element | HtmlElement. Required. |
| rateCallback | Function. Triggered when star i clicked. |
| max | Number. Number of stars to show. |
| showToolTip | true/false. If set to true, show tooltip when hover the stars. |
| starSize | Number. Width and height of the star image. |
| disableText | Text to show when disabled. |
| ratingText | Text to show when hover over stars. Text {rating} {maxRating}. |
| isBusyText | Displayed while user is rating but done not called yet. |
| readOnly | true/false. If set to true, will disable the rater. |
| step | Number. Set a precision between 0 and 1 for the rating. |
| reverse | true/false. If set to true, the ratings will be reversed. |
Methods/Properties
disable(): //Disable the widget
enable(): //Enable the widget
setRating(rating:number): //Set the rating
getRating(): //Get the average rating
dispose(); //Removes event handlers
clear(); //Clears the rating
element; //Get the element used by rater js