sr
starry-rating
npm i starry-rating
sr

starry-rating

JavaScript star rating system 🌟🌃💖

by Andre

5.1.0 (see all)License:MITTypeScript:Not FoundCategories:Vanilla JavaScript Star Rating
npm i starry-rating
Readme

Starry 🌟🌃💖

Screenshot

Starry Documentation

Installation

Include Starry scripts and stylesheets 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>

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

OptionTypeDefaultDescription
nameStringName of star rating element. This option is required, if multi rating is disabled.
starsInteger5Number of rating stars.
multiRatingBooleantrueDetermines whether the user can submit several ratings.
beginWithFloat0Preloaded rating in percentage.
readOnlyBooleanfalseRead only rating stars.
staticActiveRatingBooleantrueShow current rating while hovering over rating stars.
setStarsAfterRatingBooleantrueUpdate rating stars after rating to new value.
labelsArray / BooleanfalseLabels / tooltips for the stars.
onRateFunction(rating) => trueCalled on rating event.
onClearFunctionundefinedCalled each time when Starry is being destroyed or rebuilt.
onRenderFunctionundefinedCalled each time when Starry is build / rendered in html DOM.
iconsObjectDefault Starry icons.Icon images. Object with properties blank (blank), active (blank) and hover (blank). 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

NameArgumentsDescription
rateratingFired on rating.
renderFired on rendering.
clearFired on destroying.

Cookies

Starry use cookies, to save ratings! 🍪

License

The MIT License (MIT) - View LICENSE.md

Resources

Downloads/wk

15

GitHub Stars

15

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
5.1.0
latest
2yrs ago
No tutorials found
Add a tutorial