Installation

Let's get started! Download Starry from here or install it as a Node dependency.

npm install starry-rating
				

Include Starry into your code

Import Starry module

Use the following JavaScript code for importing Starry.

import Starry from 'starry-rating'

// or with require...
const Starry = require('starry-rating')
			

SASS source code

Include the following sass code into your stylesheet.

// Include Starry stylesheet
@import "~starry-rating/src/style/Starry.scss";
			

Distributed files

You can also use the compiled js code & css stylesheet. Copy Starry js & css to your project and include the files in your html DOM.

<!-- Local file -->
<link href="./dist/starry.min.css" type="text/css" rel="stylesheet" />

<!-- CDN -->
<link href="https://cdn.jsdelivr.net/gh/teddy95/starry@5/dist/starry.min.css" type="text/css" rel="stylesheet" />
			

<!-- Local file -->
<script src="./dist/starry.min.js" type="text/javascript" language="javascript"></script>

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/gh/teddy95/starry@5/dist/starry.min.js" type="text/javascript" language="javascript"></script>
			

How to use

The simplest way to use Starry.

HTML

<!-- Starry DOM element -->
<div id="star-rating"></div>
			

JavaScript

var starRatingEl = document.getElementById('star-rating');
var starRating = new Starry(starRatingEl);
			

More complex example

More complex example of a star rating with tooltips and custom icons, which is logging the rating to console. Tooltips have to be rendered in onRender() method by any tooltip library. In this example we use Bootstrap tooltips with jQuery & Popper.js.

var starRatingId = 'ExampleRating'; // Html DOM id + star rating element name
var starRatingEl = document.getElementById(starRatingId);
var starRating = new Starry(starRatingEl, {
	name: starRatingId, // Use a name to determine tooltips for only this Starry element
	labels: [
		'Low',
		'Nice to have',
		'Very nice',
		'Perfect',
		'Excellent'
	],
	onClear: function () {
		$('[data-name="' + starRatingId + '"] [data-tooltip]').tooltip('dispose');
	},
	onRender: function () {
		$('[data-name="' + starRatingId + '"] [data-tooltip]').tooltip({
			trigger: 'hover',
			placement: 'top'
		});
	},
	onRate: function (rating) {
		console.log(rating)
	},
	icons: {
		// File path, uri or base64 string for `src` attribute
		blank: './dist/icons/blank.svg',
		hover: './dist/icons/hover.svg',
		active: './dist/icons/active.svg'
	}
});
			

Configurations

Try out our awesome Starry playground configurator!

Option	Type	Default	Description
name	String		Name of star rating element. This option is required, if multi rating is disabled.
stars	Integer	5	Number of rating stars.
multiRating	Boolean	true	Determines whether the user can submit several ratings.
beginWith	Float	0	Preloaded rating in percentage.
readOnly	Boolean	false	Read only rating stars.
staticActiveRating	Boolean	true	Show current rating while hovering over rating stars.
setStarsAfterRating	Boolean	true	Update rating stars after rating to new value.
labels	Array / Boolean	false	Labels / tooltips for the stars. Render tooltips in onRender method.
onRate	Function	(rating) => true	Called on rating event.
onClear	Function	undefined	Called each time when Starry is being destroyed or rebuilt.
onRender	Function	undefined	Called each time when Starry is build / rendered in html DOM.
icons	Object	Default Starry icons.	Icon images. Object with properties blank (), active () and hover (). Use a string for each image source.

Methods

Get current rating getCurrentRating()

console.log(starRating.getCurrentRating()) // => 5 i.e.
			

Destroy Starry clear()

starRating.clear()
			

Update Starry with new configurations update(config)

Starry will merge the new configurations into the old ones.

starRating.update({
	readOnly: true,
	beginWith: 50
})
			

Attach event listener on(eventName, callbackFunction)

Attach an event listener to the star rating.

starRating.on('rate', function (rating) {
	console.log('Rating: ' + rating)
})
			

Events