Livewire Notiflix

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 kevsuarez/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' => [
    // ...
    Kevsuarez\LivewireNotiflix\LivewireNotiflixServiceProvider::class,
];

Publish Config File

This package publishes a config/livewire-notiflix.php file:

php artisan vendor:publish --provider="Kevsuarez\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/[email protected]/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` : `Alert (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 triggerAlert()
{
    $type        = 'success';
    $title       = 'Success!';
    $message     = 'Place you success message here!';
    $buttonText  = 'Okay';
    $options     = [];
    $useCallback = false;

    $this->alert($type, $title, $message, $buttonText, $options, $useCallback);
}

Using Callback

First, setup your action method for onAlertClick callback. Of course you can name your method anything you want.

public function onAlertClick()
{
    $this->alert(
        'success',
        'Good job!',
        'You clicked the button!.'
    );
}

Make sure you register onAlertClick method as event listeners. See: Events | Laravel Livewire for more information about event listeners.

protected $listeners = [
    'onAlertClick',
    ...
];

Finally, create an action method that triggers the alert box with onAlertClick callback pointed to the event listeners you registered.

public function triggerAlert()
{
    $type        = 'info';
    $title       = 'Hi!';
    $message     = 'Press Ok button to continue.';
    $buttonText  = 'Ok';
    $options     = [];
    $useCallback = true;

    $this->alert($type, $title, $message, $buttonText, $options, $useCallback);
}

`3` : `Flash`

Params

/*
* @param1 {String}: Optional, mode text in String format.
*   -> Supported values:
*       • notify
*       • alert
*
*   -> Default value: 'notify'
*
* @param2 {Array}: Optional, arguments in Array format.  
*   -> Supports all "notify or alert" arguments as an associative array.
*
*   -> Default value: All "notify" arguments as an associative array.
*/

Example

public function triggerFlash()
{
    //Mode: notify 
    $this->flash('notify', [
        'type'        => 'success',
        'message'     => 'Hello World!',
        'options'     => [],
        'useCallback' => false,
    ]);

    //Or

    //Mode: alert
    $this->flash('alert', [
        'type'        => 'success',
        'title'       => 'Success!',
        'message'     => 'Place you success message here!',
        'buttonText'  => 'Okay',
        'options'     => [],
        'useCallback' => false,
    ]);
}

NOTE: Callback is enabled for both modes.

`4` : `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);
}

`5` : `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);
}

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 [email protected] instead of using the issue tracker.

Credits

Copyright

License

Livewire Notiflix is open-sourced software licensed under the MIT license.

kevsuarez / livewire-notiflix Goto Github PK