Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Livewire

Building a Rating Component with Livewire v4

Create a star rating component.

1 February 20261 min readLivewireاقرأ بالعربية

On this page

  1. Component

Build an interactive rating component.

Component

php
@php
new class extends Livewire\Component {
    public int $rating = 0;
    public int $hoverRating = 0;
    public int $ratableId;
    public string $ratableType;
    
    public function setRating(int $value): void
    {
        $this->rating = $value;
        Rating::updateOrCreate(
            ['user_id' => auth()->id(), 'ratable_id' => $this->ratableId],
            ['value' => $value]
        );
    }
}
@endphp

<div>
    @for($i = 1; $i <= 5; $i++)
        <button wire:click="setRating({{ $i }})">
            {{ $i <= $rating ? '★' : '☆' }}
        </button>
    @endfor
</div>
All articles

Keep reading

  • Authorization in Livewire v4 Components1 February 20261 min read
  • Blaze Pre-Compiler: Massive Performance Gains in Livewire v41 February 20261 min read
  • Building a Bookmark Feature with Livewire v41 February 20261 min read