Socket
Socket
Sign inDemoInstall

rater-js

Package Overview
Dependencies
0
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

rater-js

Star rating widget for the browser.


Version published
Maintainers
1
Weekly downloads
1,306
decreased by-19.48%

Weekly downloads

Readme

Source

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 →

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

Keywords

FAQs

Last updated on 09 Jul 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc