rj
5.0/51
rater-js
npm i rater-js
rj

rater-js

Star rating widget for the browser. Unlimited number of stars. No dependencies. No Jquery required.

by Fredrik Olsson

1.0.1 (see all)License:MITTypeScript:Built-InCategories:Vanilla JavaScript Star Rating
npm i rater-js
Readme

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.
  • RTL support.
  • Touch support.

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

PropertyDescription
elementHtmlElement. Required.
rateCallbackFunction. Triggered when star i clicked.
maxNumber. Number of stars to show.
showToolTiptrue/false. If set to true, show tooltip when hover the stars.
starSizeNumber. Width and height of the star image.
disableTextText to show when disabled.
ratingTextText to show when hover over stars. Text {rating} {maxRating}.
isBusyTextDisplayed while user is rating but done not called yet.
readOnlytrue/false. If set to true, will disable the rater.
stepNumber. Set a precision between 0 and 1 for the rating.
reversetrue/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

Downloads/wk

804

GitHub Stars

59

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

2

OPEN PRs

9
VersionTagPublished
1.0.1
latest
3yrs ago
No tutorials found
Add a tutorial