StarRating.js

StarRating.js is a lightweight and customizable star rating library that allows you to easily integrate a star rating system into your web projects. This section covers the steps required to include StarRating.js in your project:

Install from Yarn

To install StarRating.js, run the following command in the root directory of your project:

yarn add star-rating.js --save

To use StarRating.js in your project, you need to include its stylesheet and JavaScript files in your Laravel:

<link rel="stylesheet" href="assets/libs/star-rating.js/star-rating.min.css"><link/>

<script src="assets/libs/star-rating.js/star-rating.min.js"><script/>

Below is an example of the HTML code to create a StarRating widget. This allows users to select a rating from a star dropdown:

    Your Rating*
    
        Select a rating
        5 Stars
        4 Stars
        3 Stars
        2 Stars
        1 Star
    

Here is the JavaScript code that initializes the StarRating.js instance. This will trigger the rating functionality:

new StarRating('.star-rating-prebuilt', {
    classNames: {
        active: 'gl-active',
        base: 'gl-star-rating',
        selected: 'gl-selected',
    },
    clearable: true,
    prebuilt: false,
    tooltip: false,
    maxStars: 5,
});

The above JavaScript code does the following:

• Initializes the StarRating instance by targeting the `.yourRating` class.
• The `classNames` option allows you to customize the CSS classes used for the active, base, and selected states.
• The `clearable` option enables the ability to clear the rating by clicking the rating stars again.
• The `prebuilt` option is set to `false`, allowing you to customize the rating widget's appearance.
• The `tooltip` option is set to `false` to disable the tooltips, which normally appear when hovering over the stars.
• The `maxStars` option limits the rating to a maximum of 5 stars, but you can adjust this if needed.