Starry 🌟🌃💖

Starry Documentation

Installation

Include Starry scripts and stylesheets in your html DOM:

<!-- Local file -->
<link href="https://github.com/Teddy95/Starry/blob/master/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="https://github.com/Teddy95/Starry/raw/master/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>

Or install Starry as a Node dependency:

$ npm install starry-rating

import Starry from 'starry-rating'

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

How to use

HTML markup

<!-- Use a simple div container which is selectable by id or class -->
<div id="star-rating"></div>

JavaScript API

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'
    }
});

Options

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

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

Cookies

Starry use cookies, to save ratings! 🍪

License

The MIT License (MIT) - View LICENSE.md

Resources

• Starry v3.1.3 Documentation