Nerfing Powerful Megalomaniacs

    starry-rating

    5.1.0 • Public • Published

    Starry 🌟🌃💖

    Screenshot

    Starry Documentation

    Installation

    Include Starry scripts and stylesheets in your html DOM:

    <link rel="stylesheet" type="text/css" href="./dist/starry.min.css" />
    <script type='text/javascript' language='javascript' src='./dist/starry.min.js'></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 (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

    Name Arguments Description
    rate rating Fired on rating.
    render Fired on rendering.
    clear Fired on destroying.

    Cookies

    Starry use cookies, to save ratings! 🍪

    License

    The MIT License (MIT) - View LICENSE.md

    Resources

    Install

    npm i starry-rating

    DownloadsWeekly Downloads

    10

    Version

    5.1.0

    License

    MIT

    Unpacked Size

    27.4 MB

    Total Files

    117

    Last publish

    Collaborators

    • teddy117