Files
php-flasher/docs/pages/livewire.md
T
2024-09-21 23:12:03 +01:00

3.5 KiB

permalink, title, description, adapter
permalink title description adapter
/livewire/ Livewire Learn how to easily add flash notification messages to 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 works seamlessly with Livewire v3.

Requirements

PHP v8.2 or higher Laravel v11.0 or higher


Installation

To use PHPFlasher with Livewire, follow the same installation steps as in the Laravel Installation guide.

composer require php-flasher/flasher-laravel

After installing, run this command to set up the required assets:

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 events within your 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

Each listener method accepts an array $payload parameter, which contains:

public function sweetalertConfirmed(array $payload)
{
    $promise = $payload['promise'];
    $envelope = $payload['envelope'];
}
  • promise: The resolved promise from SweetAlert.
  • envelope: The notification where the event happened.