Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
rater-js is a star rating widget for the browser.
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>
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
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;
}
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. |
disable(): //Disable the widget
enable(): //Enable the widget
setRating(rating:number): //Set the rating
getRating(): //Get the average rating
dispose(); //Removes event handlers
FAQs
Star rating widget for the browser.
The npm package rater-js receives a total of 1,575 weekly downloads. As such, rater-js popularity was classified as popular.
We found that rater-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.