Files
php-flasher/docs/pages/livewire.md
T
2024-05-05 19:44:39 +01:00

3.7 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 v8.2 or higher Laravel v11.0 or higher


Installation

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

composer require php-flasher/flasher-laravel

After installation, you need to run another command to set up the necessary assets for PHPFlasher:

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.