Laravel package to launch toast notifications.
tonystore/livewire-notification is a Laravel package for laravel package to launch toast notifications..
It currently has 9 GitHub stars and 4.605 downloads on Packagist (latest version v1.1.1).
Install it with composer require tonystore/livewire-notification.
Discover more Laravel packages by tonystore
or browse all Laravel packages to compare alternatives.
Last updated
This package provides assistance when using toast notifications. Using the iziTOAST package, which allows us to launch elegant and responsive notifications, having the facility to apply a number of configurations that you will find available on their official site .
Run this command line in console.
composer require tonystore/livewire-notification
Add the iziTOAST CDN styles and script, and the component containing the script to launch the notifications.
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/iziToast.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
@livewireScripts
...
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/iziToast.min.js">
</script>
...
//INSERT COMPONENT
<x-livewire-notification::toast />
//OR
@component('livewire-notification::components.toast') @endcomponent
</body>
php artisan vendor:publish --provider="Tonystore\LivewireNotification\LivewireNotificationProvider" --tag="config"
//config/livewire-notification
return [
'toast' => [
'title' => '', //Defaut Title
'position' => 'topRight', //Defaut Position
'timeout' => 3000, //Display Time
'modal' => null, //Very important, it defines if an event is triggered to close a Bootstrap modal.
],
Now, in any Livewire component, you can launch notifications. To launch a notification you can choose between the different types available:
Launch a simple notification with a personalized message.
$this->alert(
'success',
'Example of notification.',
);
Example of notification with modal event.
$this->alert('info','Example of notification with modal event', [
'modal' => '#hideModal'
]
);
To use more configurations, you can check the documentation on their official site .