Download the PHP package jantinnerezo/livewire-alert without Composer

Livewire Alert

Livewire Alert is a simple alert utility package designed to seamlessly integrate with your Livewire components. Under the hood, it utilizes SweetAlert2, offering you the functionality of SweetAlert2 without the need for any custom Javascript.

Interactive Demo

Check the interactive demo here: https://livewire-alert.jantinnerezo.com

Contribute to interactive demo

Do you have any ideas in mind that you can add to the interactive demo? Fork and submit a PR here: https://github.com/jantinnerezo/livewire-alert-demo

Installation

You can install the package via composer:

Next, add the scripts component to your template after the @livewireScripts.

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

You can also manually include the script by publishing livewire-alert.js

And then in your view you can include the published script instead of including inline script with <x-livewire-alert::scripts /> component.

If you go this path, make sure to include the <x-livewire-alert::flash /> right after the livewire-alert script if you still want the flash feature.

Requirements

This package is meant to use with Livewire components. Make sure you are using it with Livewire projects only.

• PHP 8.1 or higher

• Laravel 7, 8, 9 and 10

• Livewire

• SweetAlert2

Usage

You can use livewire alert by using the LivewireAlert trait.

Displaying different alert icons.

The default alert behaviour is a toast notification.

Disabling toast notification alert treatment.

Positioning Alert

List of the following alert positions:

• top
• top-start
• top-end
• center
• center-start
• center-end
• bottom
• bottom-start
• bottom-end

Buttons

SweetAlert2 has 3 buttons that is not shown by default.

To show confirm button, simply pass the showConfirmButton to alert configuration and set it to true.

Change confirm button text:

Adding event when confirm button is clicked. First create a function that will be fired when confirm button is clicked:

Add to it event listeners array to register it.

Or

And then pass it to onConfirmed key of the alert configuration.

You can also pass a parameter to the event to get the alert response.

Useful when you need to get the value of the input inside the alert.

Just do the same thing to show deny and cancel button. Just create a function for each button and register it to event listeners.

Make sure to set showDenyButton and showCancelButton to true.

Emit events to only specific component. Instead of passing the listener directly to the event, pass an array with component and listeners keys.

Don't want to define extra button configuration every time you show alert confirmation? Use the confirm method instead.

You can always override default confirm settings just tweak the configuration.

Flash Notification

You can also use alert as a flash notification. You can pass the redirect route on the fourth parameter, redirects to / by default.

Configuration

Override default alert config by publishing the livewire-alert.php config file.

Customizations

You can customize alert style by passing your custom classes, works perfectly with TailwindCSS

For more details about customization and configuration please check SweetAlert2

Contributors

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.

License

The MIT License (MIT). Please see License File for more information.