sora-team / livewire-notiflix
Notiflix Wrapper for Livewire
Requires
- php: ^8.1
- illuminate/support: ^9.0|^10.0
- livewire/livewire: ^3.0
Requires (Dev)
- orchestra/testbench: ^7.4|^8.0
- phpunit/phpunit: ^9.5|^10.0
README
This package provides the non-blocking notifications and pop-up boxes utilities for your livewire components.
Currently using notiflix library under the hood.
You can now use your favorite notiflix library without writing any custom Javascript.
Installation
You can install the package via composer:
composer require sora-team/livewire-notiflix
Requirements
This package uses livewire/livewire under the hood. Please make sure you include it in your dependencies before using this package.
Register Service Provider
The service provider will automatically get registered. Or you may manually add the service provider in your config/app.php file:
'providers' => [
// ...
Sorateam\LivewireNotiflix\LivewireNotiflixServiceProvider::class,
];
Publish Config File
This package publishes a config/livewire-notiflix.php file:
php artisan vendor:publish --provider="Sorateam\LivewireNotiflix\LivewireNotiflixServiceProvider" --tag="config"
Usage
Insert notiflix and livewire notiflix scripts directive after livewire scripts directive.
NOTE: Notiflix script is not included by default so make sure you include it before @livewireNotiflixScripts
<body>
...
@livewireScripts
...
<script src="https://cdn.jsdelivr.net/npm/notiflix@3.0.1/dist/notiflix-aio-3.0.1.min.js"></script>
...
@livewireNotiflixScripts
...
</body>
1 : Notify
Params
/*
* @param1 {String}: Optional, type text in String format.
* -> Supported values:
* • success
* • info
* • warning
* • error
* • failure
*
* -> Default value: 'success'
*
* @param2 {String}: Optional, message text in String format.
* -> Default value: 'Message'
*
* @param3 {Array}: Optional, extend the initialize options with new options and the callback for each notification element.
* -> Default value: []
*
* @param4 {Bool}: Optional, enable the callback that is triggered when the notification element has been clicked.
-> Default value: false
*/
Example
public function triggerNotify()
{
$type = 'success';
$message = 'Hello World!';
$options = [];
$useCallback = false;
$this->notify($type, $message, $options, $useCallback);
}
Using Callback
First, setup your action method for onNotifyClick callback. Of course you can name your method anything you want.
public function onNotifyClick()
{
$this->notify(
'success',
'Thanks! consider giving it a star on github.',
);
}
Make sure you register onNotifyClick method as event listeners. See: Events | Laravel Livewire for more information about event listeners.
protected $listeners = [
'onNotifyClick',
...
];
Finally, create an action method that triggers the notify box with onNotifyClick callback pointed to the event listeners you registered.
public function triggerNotify()
{
$type = 'info';
$message = 'Click Me';
$options = [];
$useCallback = true;
$this->notify($type, $message, $options, $useCallback);
}
2 : Report
Params
/*
* @param1 {String}: Optional, type text in String format.
* -> Supported values:
* • success
* • info
* • warning
* • error
* • failure
*
* -> Default value: 'success'
*
* @param2 {String}: Optional, title text in String format.
* -> Default value: 'Title'
*
* @param3 {String}: Optional, message text in String format.
* -> Default value: 'Message'
*
* @param4 {String}: Optional, button text in String format.
* -> Default value: 'Okay'
*
* @param5 {Array}: Optional, extend the initialize options with new options and the callback for each element.
* -> Default value: []
*
* @param6 {Bool}: Optional, enable the callback that is triggered when the 'Okay' button has been clicked.
* -> Default value: false
*/
Example
public function triggerReport()
{
$type = 'success';
$title = 'Success!';
$message = 'Place you success message here!';
$buttonText = 'Okay';
$options = [];
$useCallback = false;
$this->report($type, $title, $message, $buttonText, $options, $useCallback);
}
Using Callback
First, setup your action method for onReportClick callback. Of course you can name your method anything you want.
public function onReportClick()
{
$this->report(
'success',
'Good job!',
'You clicked the button!.'
);
}
Make sure you register onReportClick method as event listeners. See: Events | Laravel Livewire for more information about event listeners.
protected $listeners = [
'onReportClick',
...
];
Finally, create an action method that triggers the report box with onReportClick callback pointed to the event listeners you registered.
public function triggerReport()
{
$type = 'info';
$title = 'Hi!';
$message = 'Press Ok button to continue.';
$buttonText = 'Ok';
$options = [];
$useCallback = true;
$this->report($type, $title, $message, $buttonText, $options, $useCallback);
}
3 : Confirm
Params
/*
* @param1 {String}: Optional, title text in String format.
* -> Default value: 'Title'
*
* @param2 {String}: Optional, message text in String format.
* -> Default value: 'Message'
*
* @param3 {String}: Optional, confirm button text in String format.
* -> Default value: 'Confirm'
*
* @param4 {String}: Optional, cancel button text in String format.
* -> Default value: 'Cancel'
*
* @param5 {Array}: Optional, extend the initialize options with new options and the callbacks for each confirm box.
* -> Default value: []
*/
Example
First, setup your action methods for confirmed and cancelled (optional) callback. Of course you can name your methods anything you want.
public function confirmed($params)
{
$this->notify(
'success',
'Thanks! consider giving it a star on github.'
);
}
public function cancelled()
{
$this->notify(
'info',
'Understood',
);
}
Make sure you register onConfirmed and onCancelled methods as event listeners. See: Events | Laravel Livewire for more information about event listeners.
protected $listeners = [
'onConfirmed' => 'confirmed',
'onCancelled' => 'cancelled'
...
];
Finally, create an action method that triggers the confirmation box with onConfirmed and onCancelled callbacks pointed to the event listeners you registered.
public function triggerConfirm()
{
$title = 'Livewire Notiflix';
$message = 'Do you love Livewire Notiflix?';
$confirmButtonText = 'Yes';
$cancelButtonText = 'Nope';
$options = [
'onConfirmed' => 'onConfirmed',
'onCancelled' => 'onCancelled',
//You can pass the value as an argument to the confirm method, if you want.
'params' => 'Thanks! for choose Livewire Notiflix.',
];
$this->confirm($title, $message, $confirmButtonText, $cancelButtonText, $options);
}
4 : Ask
Params
/*
* @param1 {String}: Optional, title text in String format.
* -> Default value: 'Title'
*
* @param2 {String}: Optional, question text in String format.
* -> Default value: 'Question'
*
* @param3 {String}: Optional, answer text in String format.
* -> Default value: 'Answer'
*
* @param4 {String}: Optional, answer button text in String format.
* -> Default value: 'Answer'
*
* @param5 {String}: Optional, cancel button text in String format.
* -> Default value: 'Cancel'
*
* @param6 {Array}: Optional, extend the initialize options with new options and the callbacks for each confirm box.
* -> Default value: []
*/
Example
First, setup your action methods for onAskConfirmed and onAskCancelled (optional) callback. Of course you can name your methods anything you want.
public function onAskConfirmed($params)
{
$this->notify(
'success',
'Thanks! consider giving it a star on github.'
);
}
public function onAskCancelled()
{
$this->notify(
'info',
'Understood',
);
}
Make sure you register onAskConfirmed and onAskCancelled methods as event listeners. See: Events | Laravel Livewire for more information about event listeners.
protected $listeners = [
'onAskConfirmed',
'onAskCancelled',
...
];
Finally, create an action method that triggers the confirmation box with onAskConfirmed and onAskCancelled callbacks pointed to the event listeners you registered.
public function triggerAsk()
{
$title = 'Livewire Notiflix';
$question = 'Do you love Livewire Notiflix?';
$answer = 'Yes';
$answerButtonText = 'Answer';
$cancelButtonText = 'Cancel';
$options = [
'onAskConfirmed' => 'onAskConfirmed',
'onAskCancelled' => 'onAskCancelled',
//You can pass the value as an argument to the onAskConfirmed method, if you want.
'params' => 'Thanks! for choose Livewire Notiflix.',
];
$this->ask($title, $question, $answer, $answerButtonText, $cancelButtonText, $options);
}
6 : Loading & Loaded
Params
/*
* @param1 {String}: Optional, type text in String format.
* -> Supported values:
* • standard
* • hourglass
* • circle
* • arrows
* • dots
* • pulse
*
* -> Default value: 'success'
*
* @param2 {string}: Optional, a message in string format.
* -> Default value: null
*
* @param6 {Array}: Optional, extend the initialize options with new options and the callbacks for each confirm box.
* -> Default value: []
*/
Example
public function triggerLoading()
{
$type = 'standard';
$message = 'Loading...';
$options = [];
$this->loading($type, $message, $options);
}
public function triggerLoaded()
{
$delay = 3000;
$this->loaded($message, $delay);
}
6 : Block & UnBlock
Params
/*
* @param1 {String}: Optional, type text in String format.
* -> Supported values:
* • standard
* • hourglass
* • circle
* • arrows
* • dots
* • pulse
*
* -> Default value: 'success'
*
* @param2 {string}: Optional, a message in string format.
* -> Default value: null
*
* @param3 {string}: Optional, a message in string format.
* -> Default value: null
*
* @param4 {Array}: Optional, extend the initialize options with new options and the callbacks for each confirm box.
* -> Default value: []
*/
Example
public function triggerBlock()
{
$element = "[wire\\:id=$this->id]";
$type = 'standard';
$message = 'Loading...';
$options = [];
$this->block($type, $element, $message, $options);
}
public function triggerUnBlock()
{
$element = "[wire\\:id=$this->id]";
$delay = 3000;
$this->unblock($element, $delay);
}
Testing
composer test
Changelog
Please see CHANGELOG for more information what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security
If you discover any security related issues, please email kevsuarezc@gmail.com instead of using the issue tracker.
Credits
Copyright
Copyright © Kevin Suárez
License
Livewire Notiflix is open-sourced software licensed under the MIT license.