TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

Rater Js

rater-js Logo Donate NPM version License Downloads Build Status

rater-js is a star rating widget for the browser.

The author is looking for consulting work implementing anything with his open source libraries or other stuff. I do javascript/php/wordpress/c#/asp.net. I have over 10 years experience with software development. Keep in mind that I only work remotely.

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 →


npm install rater-js --save


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.


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
                     //we could disable the rater to prevent another rating
                     //if we dont want the user to be able to change their mind
                    //dont forget to call done
                }, function(error) {
                        //handle the error
                        //dont forget to call 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;


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.


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

Package Sidebar


npm i rater-js

Weekly Downloads






Unpacked Size

256 kB

Total Files


Last publish


  • folsson