Rater Js

Star rating widget for the browser. Unlimited number of stars. No dependencies. No Jquery required.
Alternatives To Rater Js
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
2 months ago60mitJavaScript
:star2: Raty - A Star Rating Plugin
Laravel Love1,014112a month ago51February 23, 20227mitPHP
Add Social Reactions to Laravel Eloquent Models. It lets people express how they feel about the content. Fully customizable Weighted Reaction System & Reaction Type System with Like, Dislike and any other custom emotion types. Do you react?
Laravel Acquaintances677
2 days ago28December 14, 202116mitPHP
This package gives Eloquent models the ability to manage friendships (with groups), followships along with Likes, favorites..etc.
Django Ratings399
386 years ago8July 11, 201236bsd-2-clausePython
Pluggable rating fields in Django.
3 years ago4October 25, 201838gpl-3.0Go
typegram: open source publishing platform
Data Movies191
3 years ago6Ruby
Download data from IMDB movies and parse into useful form
Laravel Rating13712 years ago8April 22, 2021mitPHP
Laravel package that allows you to rate, like & dislike and vote(+1,-1) your models with a simple and clear ways
Django Updown127
115 years ago16February 27, 20185otherPython
Simple youtube like up and down rating app for Django.
67 years ago4April 08, 2016mitObjective-C
Star rating view, often used in vote. Easy to use, and flexible configurations.
Yii2 Vote67
35 years ago14May 19, 20185bsd-3-clausePHP
Provides voting for any model :+1: :-1:
Alternatives To Rater Js
Select To Compare

Alternative Project Comparisons

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 →


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
Popular Rating Projects
Popular Vote Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.