matierenoire/laravel-livewire-swal

This package provides a simple alert utilities for your livewire components.

Maintainers

Details

github.com/matiere-noire/laravel-livewire-swal

Homepage

Source

Issues

Installs: 5 786

Dependents: 0

Suggesters: 0

Security: 0

Stars: 3

Watchers: 1

Forks: 0

Open Issues: 0

dev-main 2024-09-11 10:14 UTC

Requires

MIT f5ee5292dc0989d3430384b5c5517c7f22944292

  • Matière Noire <developer.woop@matierenoire.io>

This package is not auto-updated.

Last update: 2024-11-06 10:56:50 UTC

README

Directly inspired by : https://github.com/jantinnerezo/livewire-alert

🚀 Installation

You can install the package via composer:

composer require matierenoire/laravel-livewire-swal

Requirements

This package uses Livewire under the hood. Please make sure you include it in your dependencies before using this package.

  • PHP 7.2 or higher

  • Laravel 7, 8, 9, 10, 11

  • Livewire

  • SweetAlert2

Usage

Include Component

Insert Sweet2Alert2 and livewire alert scripts component after livewire scripts directive.

SweetAlert2 script is not included by default so make sure you include it before

<body>
  ... @livewireScripts ...

  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
  ...
  <x-livewire-alert::scripts />
</body>

Publish Config File

php artisan vendor:publish --provider="MN\LivewireAlert\LivewireAlertServiceProvider" --tag="config"

Show Alert

You can play around with SweetAlert2 configuration.

$this->alert('success', 'Hello World!', [
      'position' =>  'top-end',
      'timer' =>  3000,
      'toast' =>  true,
      'text' =>  '',
      'confirmButtonText' =>  'Ok',
      'cancelButtonText' =>  'Cancel',
      'showCancelButton' =>  true,
      'showConfirmButton' =>  false,
]);

Alert Confirmation

This package also supports showing confirmation alert on action.

This is a complete refactor of the previous alert confirmation to support multiple confirms on the same livewire component. First, setup your action methods for onConfirmed and onCancelled callback. Of course you can name your methods anything you want.

public function confirmed()
{
    // Example code inside confirmed callback

    $this->alert(
        'success',
        'Thanks! consider giving it a star on github.'
    );
}

public function cancelled()
{
    // Example code inside cancelled callback

    $this->alert('info', 'Understood');
}

Make sure you register confirmed and cancelled methods as event listeners.

See: laravel-livewire.com/docs/2.x/events for more information about event listeners.

If you have multiple confirmation alerts on the same livewire component, you can define as many callback methods you want and just add it to event listeners.

protected $listeners = [
    'confirmed',
    'cancelled',
    ...
];

Finally, create an action method that triggers the confirmation alert with onConfirmed and onCancelled callbacks pointed to the event listeners you registered.

public function triggerConfirm()
{
    $this->confirm('Do you love Livewire Alert?', [
        'toast' => false,
        'position' => 'center',
        'showConfirmButton' => true,
        'cancelButtonText' => Nope,
        'onConfirmed' => 'confirmed',
        // 'onConfirmed' => ['confirmed', $id], you can pass argument with array
        'onCancelled' => 'cancelled'
    ];
}