npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rater-js

v1.0.1

Published

Star rating widget for the browser.

Downloads

6,513

Readme

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

| 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. |

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