Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fredolss/rater-js
Star rating widget for the browser. Unlimited number of stars. No dependencies. No Jquery required.
https://github.com/fredolss/rater-js
javascript js rater rater-js rating star star-rater star-rating star-rating-component star-rating-widget star-ratings vote voting widget
Last synced: 15 days ago
JSON representation
Star rating widget for the browser. Unlimited number of stars. No dependencies. No Jquery required.
- Host: GitHub
- URL: https://github.com/fredolss/rater-js
- Owner: fredolss
- License: mit
- Created: 2017-05-07T13:33:27.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-03T17:18:17.000Z (8 months ago)
- Last Synced: 2024-04-14T21:51:45.213Z (7 months ago)
- Topics: javascript, js, rater, rater-js, rating, star, star-rater, star-rating, star-rating-component, star-rating-widget, star-ratings, vote, voting, widget
- Language: JavaScript
- Homepage: https://fredolss.github.io/rater-js/
- Size: 1010 KB
- Stars: 75
- Watchers: 8
- Forks: 13
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Rater Js
========
[](https://paypal.me/folssondev)
[![NPM version][npm-image]][npm-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]
[](https://travis-ci.org/fredolss/rater-js)
**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 →**][RaterJS]
## 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.
```html
```
### Global scope
Directly reference the js from the module
```html
```
The widget will be available globally as "raterJs" on the window object.
### Node/Browserify
Just require the module.
```js
var rater = require("rater-js");
```
Lastly we can use the widget like this:
```js
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.
```css
//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
```js
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
```
[RaterJs]:https://fredolss.github.io/rater-js/example/ "RaterJs"
[npm-image]: https://img.shields.io/npm/v/rater-js.svg?style=flat-square
[npm-url]: https://npmjs.org/package/rater-js
[license-url]: LICENSE.md
[license-image]: https://img.shields.io/:license-mit-blue.svg?style=flat-square
[downloads-image]: http://img.shields.io/npm/dm/rater-js.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/rater-js