Rating

A star rating component for Laravel applications. Supports interactive ratings and read-only display. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/rating

Livewire Usage

Basic Usage

<livewire:sb-rating wire:model="rating" />

Display Only (Read-only)

<livewire:sb-rating :value="4" :readonly="true" />

Different Max Stars

<livewire:sb-rating wire:model="rating" :max="10" />

Different Sizes

<livewire:sb-rating wire:model="rating" size="sm" />
<livewire:sb-rating wire:model="rating" size="md" />
<livewire:sb-rating wire:model="rating" size="lg" />

Different Colors

<livewire:sb-rating wire:model="rating" color="yellow" />
<livewire:sb-rating wire:model="rating" color="orange" />
<livewire:sb-rating wire:model="rating" color="red" />
<livewire:sb-rating wire:model="rating" color="blue" />

Livewire Props

Vue 3 Usage

Setup

import { SbRating } from './vendor/sb-rating';
app.component('SbRating', SbRating);

Basic Usage

<template>
  <SbRating v-model="rating" />
  <p>You rated: {{ rating }} stars</p>
</template>

<script setup>
import { ref } from 'vue';
const rating = ref(0);
</script>

Read-only Display

<template>
  <SbRating :model-value="4.5" readonly />
</template>

Custom Max

<template>
  <!-- 10-star rating -->
  <SbRating v-model="rating" :max="10" />
</template>

Sizes

<template>
  <SbRating v-model="rating" size="sm" />  <!-- 16px stars -->
  <SbRating v-model="rating" size="md" />  <!-- 24px stars -->
  <SbRating v-model="rating" size="lg" />  <!-- 32px stars -->
</template>

Colors

<template>
  <SbRating v-model="rating" color="yellow" />
  <SbRating v-model="rating" color="orange" />
  <SbRating v-model="rating" color="red" />
  <SbRating v-model="rating" color="blue" />
</template>

Product Review Example

<template>
  <div class="space-y-4">
    <div>
      <label class="block text-sm font-medium mb-1">Your Rating</label>
      <SbRating v-model="review.rating" size="lg" />
    </div>

    <div>
      <label class="block text-sm font-medium mb-1">Review</label>
      <textarea v-model="review.comment" class="w-full border rounded p-2" />
    </div>

    <button @click="submitReview">Submit Review</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const review = ref({
  rating: 0,
  comment: ''
});

const submitReview = () => {
  // Submit review
};
</script>

Average Rating Display

<template>
  <div class="flex items-center gap-2">
    <SbRating :model-value="Math.round(averageRating)" readonly />
    <span class="text-sm text-gray-600">
      {{ averageRating.toFixed(1) }} ({{ totalReviews }} reviews)
    </span>
  </div>
</template>

Vue Props

Events

Size Reference

Color Options

Features

• Interactive: Click to set rating
• Read-only Mode: Display ratings without interaction
• Hover Effects: Scale animation on hover
• Customizable: Colors, sizes, max stars

Styling

Uses Tailwind CSS:

• Filled stars use selected color
• Empty stars are gray
• Hover scale animation
• Smooth transitions

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x

License

MIT License