Star rating widget for the browser. Unlimited number of stars. No dependencies. No Jquery required.
Clone or download
fredolss clear method
touch support
Latest commit 1f10b67 Jan 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example add method for clearing/reset rater value Jan 8, 2019
lib clear method Jan 12, 2019
test clear method Jan 12, 2019
.gitignore add vscode to gitignore Mar 24, 2018
.travis.yml update travis.yml Mar 23, 2018
LICENSE Initial commit May 7, 2017
README.md clear method Jan 12, 2019
_config.yml Update _config.yml Jun 5, 2018
bower.json add bower Apr 21, 2018
index.d.ts clear method Jan 12, 2019
index.js clear method Jan 12, 2019
package.json use pointer cursor Jun 5, 2018
ratings.png update docs Apr 1, 2018

README.md

Rater Js

rater-js Logo Donate NPM version License Downloads Build Status

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.

Try Rater JS Demo →

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. Will show or not 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. Will disable the rater.
step Number. Set a precision between 0 and 1 for the rating.

Methods

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