Tailwind CSS Rating

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate Raty JS with FlyonUI.

1
Installation
Install raty-js using npm:
npm install raty-js
2
Include Raty JavaScript and CSS
Include the following CSS and JS files in your page:
<head> <link rel="stylesheet" href="../path/to/raty-js/src/raty.css" /> </head> <body> <script src="../path/to/raty-js/build/raty.js"></script> </body>
Note: A CDN link will not work here as customization of the default Vendor CSS is required to align with FlyonUI's design.
3
Update Tailwind Configuration
Update your tailwind.css file to incorporate the path for the FlyonUI RatyJS override CSS.
@import "flyonui/src/vendor/raty.css";
4
Initialize Raty
Add the Raty initialization JavaScript code below the Raty JS library inclusion. Set up the Raty instance to target elements using its id or data-raty attribute. Ensure this Raty JS file is in a location where TailwindCSS can monitor it, as specified in step 3.
For more options and detailed configurations, refer to the Raty JS documentation .
const target = new Raty(document.querySelector('[data-raty]'), // or #Id { path: 'path/to/star-images/', }); target.init();

Class Name	Type	Description
raty-jump	Modifier	Applies a jump animation to the clicked star.

The following example demonstrates the usage of a star-based rating system with the raty-js library using images, initialized with the below provided JavaScript code. Set the path to the location where the images are stored in your project, or to the node modules if they are stored there.

<script>
document.addEventListener('DOMContentLoaded', function () {
  const ratingImage = new Raty(document.querySelector('#raty-with-image'), {
    path: '/images/' // path/to/images(directory)
  })

  ratingImage.init()
})
</script>

With fonts

The following example demonstrates the usage of a star-based rating system with the raty-js library using fonts, initialized with the below provided JavaScript code. Set the path to the location where the fonts are stored in your project, or to the node modules if they are stored there.

<script>
document.addEventListener('DOMContentLoaded', function () {
  const ratingFont = new Raty(document.querySelector('#raty-with-font'), {
    path: '/fonts/', // path/to/fonts(directory)
    starType: 'i'
  })
  ratingFont.init()
})
</script>

Illustrations

Read only (static)

The following example demonstrates the usage of a star-based read only (static) rating system, initialized with the below provided JavaScript code.

<script>
document.addEventListener('DOMContentLoaded', function () {
  const ratingReadOnly = new Raty(document.querySelector('#raty-read-only'), {
    path: '/images/',
    score: 3,
    readOnly: true
  })
  ratingReadOnly.init()
})
</script>

Custom icons

The following example demonstrates the usage of a rating with the custom heart icons, initialized with the below provided JavaScript code.

<script>
document.addEventListener('DOMContentLoaded', function () {
  const ratingCustomIcons = new Raty(document.querySelector('#raty-custom-icons'), {
    starType: 'i',
    starOff: 'icon-[tabler--heart-filled] opacity-20 size-7 text-error',
    starOn: 'icon-[tabler--heart-filled] size-7 text-error'
  })
  ratingCustomIcons.init()
})
</script>

With half stars

The following example demonstrates the usage of a rating with half stars, initialized with the below provided JavaScript code.

<script>
document.addEventListener('DOMContentLoaded', function () {
  const ratingHalfStars = new Raty(document.querySelector('#raty-with-half-stars'), {
    path: '/images/',
    score: 2.5,
    half: true
  })
  ratingHalfStars.init()
})
</script>

Custom sizes

Utilize size-{number} with starOff & starOn options for rating with custom sizes.

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Small
  const ratingSmall = new Raty(document.querySelector('#raty-sm'), {
    starType: 'i',
    score: 1,
    starOff: 'icon-[tabler--star-filled] opacity-20 size-4',
    starOn: 'icon-[tabler--star-filled] size-4'
  })
  ratingSmall.init()

  // Default
  const ratingDefault = new Raty(document.querySelector('#raty-default'), {
    starType: 'i',
    score: 2,
    starOff: 'icon-[tabler--star-filled] opacity-20 size-7',
    starOn: 'icon-[tabler--star-filled] size-7'
  })
  ratingDefault.init()

  // Large
  const ratingLarge = new Raty(document.querySelector('#raty-lg'), {
    starType: 'i',
    score: 3,
    starOff: 'icon-[tabler--star-filled] opacity-20 size-10',
    starOn: 'icon-[tabler--star-filled] size-10'
  })
  ratingLarge.init()
})
</script>

Custom colors

Utilize text-{color} with starOff & starOn options for rating with custom colors.

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Primary
  const ratingPrimary = new Raty(document.querySelector('#raty-primary'), {
    starType: 'i',
    score: 1,
    starOff: 'icon-[tabler--star-filled] opacity-20 size-7 text-primary',
    starOn: 'icon-[tabler--star-filled] size-7 text-primary'
  })
  ratingPrimary.init()
  
  // Warning
  const ratingWarning = new Raty(document.querySelector('#raty-warning'), {
    starType: 'i',
    score: 2,
    starOff: 'icon-[tabler--star-filled] opacity-20 size-7 text-warning',
    starOn: 'icon-[tabler--star-filled] size-7 text-warning'
  })
  ratingWarning.init()

  // Error
  const ratingError = new Raty(document.querySelector('#raty-error'), {
    starType: 'i',
    score: 3,
    starOff: 'icon-[tabler--star-filled] opacity-20 size-7 text-error',
    starOn: 'icon-[tabler--star-filled] size-7 text-error'
  })
  ratingError.init()
})
</script>

With hints

The following example demonstrates the usage of a rating with hints, initialized with the below provided JavaScript code.

<script>
document.addEventListener('DOMContentLoaded', function () {
  const ratingHints = new Raty(document.querySelector('#raty-with-hints'), {
    path: '/images/',
    hints: ['Terrible 😔', 'Unsatisfactory 😑', 'Average 😊', 'Nice 😁', 'Splendid 😍'],
    target: '[data-hint]',
    targetFormat: 'Your experience was: {score}'
  })
  ratingHints.init()
})
</script>

Custom number of stars

The following example demonstrates the usage of a rating with custom number of stars , initialized with the below provided JavaScript code.

<script>
document.addEventListener('DOMContentLoaded', function () {
  const ratingCustomStars = new Raty(document.querySelector('#raty-with-custom-number-of-stars'), {
    path: '/images/',
    number: 8
  })
  ratingCustomStars.init()
})
</script>

With score

The following example demonstrates the usage of a rating with score(value) , initialized with the below provided JavaScript code.

<div class="flex items-center justify-between gap-4">
  <div class="flex" id="raty-with-score"></div>
  <div class="border-base-content/25 rounded-field text-base-content flex size-8 items-center justify-center border border-2 font-semibold" id="raty-score" ></div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const ratingWithScore = new Raty(document.querySelector('#raty-with-score'), {
    starType: 'i',
    score: 2,
    starOff: 'icon-[tabler--star-filled] opacity-20 size-7',
    starOn: 'icon-[tabler--star-filled] size-7 text-warning',
    starHalf: 'icon-[tabler--star-half-filled] size-7 text-warning',
    targetScore: '#raty-score',
    half: true,
    click: function (score, event) {
      document.querySelector('#raty-score').textContent = score
    }
  })
  ratingWithScore.init()

  // Initial score
  document.querySelector('#raty-score').textContent = ratingWithScore.score()
})
</script>

With reset option

The following example demonstrates the usage of a rating with reset option, initialized with the below provided JavaScript code.

<script>
document.addEventListener('DOMContentLoaded', function () {
  const ratingWithReset = new Raty(document.querySelector('#raty-with-reset'), {
    starType: 'i',
    score: 2,
    starOff: 'icon-[tabler--star-filled] opacity-20 size-7',
    starOn: 'icon-[tabler--star-filled] size-7 text-warning',
    cancelOff: 'cancel-off-png',
    cancelOn: 'cancel-on-png text-error',
    cancelButton: true,
    cancelHint: 'Reset rating!',
    cancelPlace: 'right'
  })
  ratingWithReset.init()
})
</script>

With animation

The following example demonstrates the usage of a rating with animation, initialized with the below provided JavaScript code.

<script>
document.addEventListener('DOMContentLoaded', function () {
  const ratingWithAnimation = new Raty(document.querySelector('#raty-with-animation'), {
    starType: 'i',
    starOff: 'icon-[tabler--star-filled] opacity-20 size-7',
    starOn: 'icon-[tabler--star-filled] size-7 text-warning',
    click: function (score, event, target) {
      // Add the animation class to the clicked star using requestAnimationFrame
      requestAnimationFrame(() => {
        target.target.classList.add('raty-jump')
      })
    }
  })
  ratingWithAnimation.init()
  
  // Add hover effect immediately after initialization
  const stars = document.querySelectorAll('#raty-with-animation i') // Adjust the selector if needed
  stars.forEach(star => {
    star.addEventListener('mouseover', () => {
      star.classList.add('raty-jump')
    })
    star.addEventListener('mouseout', () => {
      star.classList.remove('raty-jump')
    })
  })
})
</script>

FlyonUI