tonystore / livewire-notification
Laravel package to launch toast notifications.
Installs: 3 149
Dependents: 0
Suggesters: 0
Security: 0
Stars: 9
Watchers: 2
Forks: 0
Open Issues: 1
Type:package
Requires
- php: ^8.0
- livewire/livewire: ^3.0
Requires (Dev)
- orchestra/testbench: ^8.0
- phpunit/phpunit: ^10.0
README
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 .
REQUIREMENTS
INSTALLATION VIA COMPOSER
Step 1: Composer
Run this command line in console.
composer require tonystore/livewire-notification
Step 2: Include component
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/izitoast@1.4.0/dist/css/iziToast.min.css" rel="stylesheet" type="text/css" /> </head> <body> ... @livewireScripts ... <script src="https://cdn.jsdelivr.net/npm/izitoast@1.4.0/dist/js/iziToast.min.js"> </script> ... //INSERT COMPONENT <x-livewire-notification::toast /> //OR @component('livewire-notification::components.toast') @endcomponent </body>
Publish Config File
php artisan vendor:publish --provider="Tonystore\LivewireNotification\LivewireNotificationProvider" --tag="config"
Default configuration
//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. ],
Usage
Now, in any Livewire component, you can launch notifications. To launch a notification you can choose between the different types available:
- success
- info
- error
- warning
Example 1
Launch a simple notification with a personalized message.
$this->alert( 'success', 'Example of notification.', );
Example 2
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 .