Package Exports

raty-js
raty-js/src/raty.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (raty-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Raty - A Star Rating Plugin.

Rating for Rails?

It's Rating: https://github.com/wbotelhos/rating ⭐

Help

Check the Tutorial to learn about all available features.
If you're migrating from v3 to v4 check the Upgrade document.

Usage with Image

raty.js
star-off.png
star-on.png

<script src="raty.js"></script>

<div data-raty></div>

const raty = new Raty(document.querySelector('[data-raty]'));

raty.init();

Usage with Font

raty.css
raty.[eot|svg|ttf|woff]
raty.js

<link rel="stylesheet" href="raty.css">

<script src="raty.js"></script>

<div data-raty></div>

new Raty(document.querySelector('[data-raty]'), { starType: 'i' });

Options

Property	Default	Description
`cancelButton`	`false`	Creates a cancel button to cancel the rating.
`cancelClass`	`'raty-cancel'`	Name of cancel's class.
`cancelHint`	`'Cancel this rating!'`	The cancel's button hint.
`cancelOff`	`'cancel-off.png'`	Icon used on active cancel.
`cancelOn`	`'cancel-on.png'`	Icon used inactive cancel.
`cancelPlace`	`'left'`	Cancel's button position.
`click`	`undefined`	Callback executed on rating click.
`half`	`false`	Enables half star selection.
`halfShow`	`true`	Enables half star display.
`hints`	`['bad', 'poor', 'regular', 'good', 'gorgeous']`	Hints used on each star.
`iconRange`	`undefined`	Object list with position and icon on and off to do a mixed icons
`iconRangeSame`	`false`	All icons prior to selection will be the same as the selection.
`mouseout`	`undefined`	Callback executed on mouseout.
`mouseover`	`undefined`	Callback executed on mouseover.
`noRatedMsg`	`'Not rated yet!'`	Hint for non rated elements when it's readOnly.
`number`	`5`	The number of stars that will be presented.
`numberMax`	`20`	Max number of stars star the option number will create.
`path`	`undefined`	A global path where the icon will be found.
`precision`	`false`	Enables the selection of a precise score.
`readOnly`	`false`	Turns the rating read-only.
`round`	`{ down: .25, full: .6, up: .76 }`	Includes value attributes to do the score rounding math.
`score`	`undefined`	Initial rating.
`scoreName`	`'score'`	Name of the hidden field that holds the score value.
`single`	`false`	Enables single star selection.
`space`	`true`	Puts space between the icons.
`starHalf`	`'star-half.png'`	The name of the half star image.
`starOff`	`'star-off.png'`	Name of the star image off.
`starOn`	`'star-on.png'`	Name of the star image on.
`target`	`undefined`	Element selector where the score will be displayed.
`targetFormat`	`'{score}'`	Template to interpolate the score in.
`targetKeep`	`false`	If the last rating value will be kept on mouseout.
`targetScore`	`undefined`	Score field target avoiding hidden field creation
`targetText`	`''`	Default text in a target.
`targetType`	`'hint'`	Choose if target will receive a hint or the score number
`starType`	`'img'`	Element used to represent a star.

Functions

To call some function, first, save the Raty instance on a variable and then call the functions:

var raty = new Raty(document.querySelector('[data-raty]'));

Function	Description
`raty.score()`	Get the current score.
`raty.score(number)`	Set a score.
`raty.click(number)`	Click on a star.
`raty.readOnly(boolean)`	Change the read-only state.
`raty.cancel(boolean)`	Cancel the rating. The last param force the click callback.
`raty.move(number)`	Move the mouse to the given score point position.

Build

gulp 'amd'
gulp 'umd'
gulp 'commonjs'
gulp 'systemjs'
gulp 'es6'
gulp 'es5'
gulp 'es5-test'