Files
php-flasher/docs/pages/livewire.md
T
2024-04-11 16:19:15 +00:00

3.3 KiB

permalink, title, description, adapter
permalink title description adapter
/livewire/ Livewire Learn how to seamlessly integrate flash notification messages into your Livewire application with PHPFlasher. Follow our step-by-step guide to install and use the library in your project, and start engaging and informing your users with powerful flash messages. flasher

{% PHPFlasher %} provides a seamless integration with Livewire v3.

Requirements

PHP >= 8.2 Laravel >= 11


Installation

To integrate {% PHPFlasher %} with Livewire, follow the same installation steps as for the Laravel Installation package.

composer require php-flasher/flasher-laravel

Then, run:

php artisan flasher:install

Usage

Dispatch notifications from your components

{% assign id = '#/ livewire' %} {% assign type = 'success' %} {% assign message = 'User saved successfully!' %} {% assign options = '{}' %} {% include example.html %}

{{ id }}

namespace App\Livewire;

use Livewire\Component;

class UserComponent extends Component
{
    public function save()
    {
        flash()->{{ type }}('{{ message }}');
    }

    public function render()
    {
        return view('livewire.user');
    }

Events

For sweetalert you can listen to sweetalert:confirmed, sweetalert:denied and sweetalert:dismissed from withing you component

<script type="text/javascript"> messages["#/ livewire events"] = { handler: "sweetalert", type: "info", message: "Are you sure you want to delete the user ?", options: { showDenyButton: true, preConfirm: function() { flasher.success('User successfully deleted.'); }, preDeny: function() { flasher.error('Deletion cancelled.'); }, }, }; </script>
#/ livewire events

namespace App\Livewire;

use Livewire\Attributes\On;
use Livewire\Component;

class UserComponent extends Component
{
    public function render()
    {
        return <<<'HTML'
            <div>
                <button wire:click="deleteUser">Delete User</button>
            </div>
        HTML;
    }

    public function deleteUser()
    {
        sweetalert()
            ->showDenyButton()
            ->info('Are you sure you want to delete the user ?');
    }

    #[On('sweetalert:confirmed')]
    public function onConfirmed(array $payload): void
    {
        flash()->info('User successfully deleted.');
    }
    
    #[On('sweetalert:denied')]
    public function onDeny(array $payload): void
    {
        flash()->info('Deletion cancelled.');
    }
}

event handlers context

Every listener method accept an array $payload parameter which contain the following data :

public function sweetalertConfirmed(array $payload)
{
    $promise = $payload['promise'];
    $envelope = $payload['envelope'];
}

promise : the resolved promise from sweetalert.

envelope : the notification where the event happened.