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.

Try Rater JS Demo →

Installation

npm install rater-js --save

Development

Development and CI use Node.js 24. With nvm installed, select the configured version and run the build and test suite:

nvm use
npm ci
npm run build
npm test

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();
                });
	}});

Multiple raters

raterJs creates one independent rater for one element. To turn every element matching a selector into a rater, create one instance for each element:

<div class="rater"></div>
<div class="rater"></div>

var raters = Array.from(document.querySelectorAll(".rater")).map(function(element) {
    return raterJs({
        element: element,
        rateCallback: function(rating, done) {
            this.setRating(rating);
            done();
        }
    });
});

The returned array contains the individual instances, so each rater can be updated, disabled, cleared, or disposed independently.

Spacing between stars

Stars have a 2px gap by default. Use starSpacing to customize the gap in pixels, or set it to 0 to use the previous layout without additional spacing between the star image boxes:

var spacedRater = raterJs({
    element: document.querySelector("#rater"),
    starSize: 32,
    starSpacing: 6
});

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.
starSpacing	Number. Additional space between star image boxes in pixels. Defaults to 2. Use 0 for no additional spacing.
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