Notable Peru Mariachis

    raty-js
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.0 • Public • Published

    Raty - A Star Rating Plugin

    Tests NPM Version Maintainability Sponsor

    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>
    new Raty(document.querySelector('[data-raty]'));

    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.

    Install

    npm i raty-js

    DownloadsWeekly Downloads

    5,633

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    175 kB

    Total Files

    26

    Last publish

    Collaborators

    • wbotelhos