Reusable Livewire Alerts with Dismiss and AutoHide Support

Usage

Once you have both files ready in your application. You can use this trait in your livewire components.

<?php

namespace App\Http\Livewire;

use App\Http\Livewire\Traits\LivewireAlerts;
use Livewire\Component;

class FlashMessageComponent extends Component
{
    use LivewireAlerts;

    ...

}

Also, you must include the partial blade view file, exactly where you would like to show the alert messages

    @include('livewire.traits.livewire-alerts')

To show alerts from your livewire component you can use the below methods

//Normal Alerts
$this->successAlert('This is a success alert');
$this->errorAlert('This is an error alert');
$this->infoAlert('This is an info alert');
$this->warningAlert('This is a warning alert');

//Dismissible Alerts
$this->successAlert('This is a dismissible success alert', 0, true);
$this->errorAlert('This is an dismissible error alert', 0, true);
$this->infoAlert('This is an dismissible info alert', 0 , true);
$this->warningAlert('This is a dismissible warning alert', 0 , true);

//Auto Hide Alerts
$this->successAlert('This success alert will auto hide after 3 seconds', 3000, false);
$this->errorAlert('This error alert will auto hide after 3 seconds', 3000, false);
$this->infoAlert('This info alert will auto hide after 3 seconds', 3000 , false);
$this->warningAlert('This warning alert will auto hide after 3 seconds', 3000, false);