A very simple alerts utility for your existing livewire components. This package uses SweetAlert2 out-of-the-box. https://sweetalert2.github.io/.
If you just want to show simple yet good-looking alert messages with nice animations this is for you!
You can install the package via composer:
composer require jantinnerezo/livewire-alert
This package uses livewire/livewire (https://laravel-livewire.com/) under the hood.
Please make sure you include it in your dependencies before using this package.
First, add the <x-livewire-alert::scripts /> component after @livewireScripts. That's it and you are good to go!
Let say you want to display a success alert message when a user successfully submitted a form:
public function submit()
{
$this->alert('success', 'Submission successful!');
}Example available events:
// Success event
$this->alert('success', 'Submission successful!');
// Information event
$this->alert('info', 'Hello, Awesome Developer!');
// Warning event
$this->alert('warning', 'You have been warned!');
// Error event
$this->alert('error', 'Whoops! you did it again!');Livewire Alert also supports show confirmation alert on action powered by alpinejs under the hood so make sure you also include alpinejs https://github.com/alpinejs/alpine.
First you need to include confirmation component to your livewire views
<x-livewire-alert::confirm onConfirmed="onConfirmedAction" onCancelled="onCancelledCallBack" />
Make sure you add the livewire method names for onConfirmed and onCancelled props.
Livewire Alert confirmation component will call the methods for you when user hits the confirm or cancel button.
And then just add this to your livewire component class action method:
$this->confirm('Are you sure?', [
'text' => 'You are about to delete something'
]);
return;In cases you want to "flash" a success or failure message to the user
$this->flash('success', 'Submission successful!');
$this->flash('error', 'Whoops! something went wrong!');
return redirect()->to('/');The default configurations:
[
'position' => 'top-end',
'timer' => 3000,
'toast' => true,
'text' => null,
'showCancelButton' => true,
'showConfirmButton' => false
]Here's an example of overriding the default configurations:
// Success event
$this->alert('success', 'You are successful!', [
'position' => 'center',
'timer' => 15000,
'toast' => false,
'text' => 'I am a subtext',
'showCancelButton' => false,
'showConfirmButton' => false
]);For more details about the configuration, see: https://sweetalert2.github.io/#configuration
composer test
Please see CHANGELOG for more information what has changed recently.
Please see CONTRIBUTING for details.
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
The MIT License (MIT). Please see License File for more information.