包简介

This package provides a simple alert utilities for your livewire components. borrowed from jantinnerezo/livewire-alert

README 文档

README

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:

composer require arnoldwamae/livewire-alert

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.

<body>
  @livewireScripts

  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <x-livewire-alert::scripts />
</body>

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

php artisan vendor:publish --tag=livewire-alert:assets

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.

<script src="{{ asset('vendor/livewire-alert/livewire-alert.js') }}"></script>
<x-livewire-alert::flash />

Requirements

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

PHP 7.2 or higher
Laravel 7, 8, 9 and 10
Livewire
SweetAlert2

Usage

You can use livewire alert by using the LivewireAlert trait.

use Jantinnerezo\LivewireAlert\LivewireAlert;

class Index extends Component
{
    use LivewireAlert;

    public function submit()
    {
        $this->alert('success', 'Basic Alert');
    }
}

Displaying different alert icons.

The default alert behaviour is a toast notification.

$this->alert('success', 'Success is approaching!');

$this->alert('warning', 'The world has warned you.');

$this->alert('info', 'The fact is you know your name :D');

$this->alert('question', 'How are you today?');

Disabling toast notification alert treatment.

$this->alert('info', 'This is not as toast alert', [
    'toast' => false
]);

Positioning Alert

$this->alert('info', 'Centering alert', [
    'position' => 'center'
]);

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.

$this->alert('question', 'How are you today?', [
    'showConfirmButton' => true
]);

Change confirm button text:

$this->alert('question', 'How are you today?', [
    'showConfirmButton' => true,
    'confirmButtonText' => 'Good'
]);

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

public function confirmed()
{
    // Do something
}

Add to it event listeners array to register it.

protected $listeners = [
    'confirmed'
];

Or

public function getListeners()
{
    return [
    	'confirmed'
    ];
}

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

$this->alert('question', 'How are you today?', [
    'showConfirmButton' => true,
    'confirmButtonText' => 'Good',
    'onConfirmed' => 'confirmed'
]);

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.

$this->alert('warning', 'Please enter password', [
    'showConfirmButton' => true,
    'confirmButtonText' => 'Submit',
    'onConfirmed' => 'confirmed',
    'input' => 'password',
    'inputValidator' => '(value) => new Promise((resolve) => '.
        '  resolve('.
        '    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&]).{8,}$/.test(value) ?'.
        '    undefined : "Error in password"'.
        '  )'.
        ')',
    'allowOutsideClick' => false,
    'timer' => null
]);

public function confirmed($data)
{
    // Get input value and do anything you want to it
    $password = $data['value'];
}

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

public function denied()
{
    // Do something when denied button is clicked
}

public function cancelled()
{
    // Do something when cancel button is clicked
}

public function getListeners()
{
    return [
    	'denied',
      'dismissed'
    ];
}

Make sure to set showDenyButton and showCancelButton to true.

$this->alert('warning', 'Alert with deny and cancel button', [
    'showDenyButton' => true,
    'denyButtonText' => 'Deny',
    'showCancelButton' => true,
    'cancelButtonText' => 'Cancel',
    'onDenied' => 'denied',
    'onDismissed' => 'cancelled'
]);

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

'onConfirmed' => [
   'component' => 'livewire-component',
   'listener' => 'confirmed'
];

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.

$this->confirm('Are you sure do want to leave?', [
    'onConfirmed' => 'confirmed',
]);

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.

$this->flash('success', 'Successfully submitted form', [], '/');

Configuration

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

php artisan vendor:publish --tag=livewire-alert:config

[
    'alert' => [
        'position' => 'top-end',
        'timer' => 3000,
        'toast' => true,
        'text' => null,
        'showCancelButton' => false,
        'showConfirmButton' => false
    ],
    'confirm' => [
        'icon' => 'warning',
        'position' => 'center',
        'toast' => false,
        'timer' => null,
        'showConfirmButton' => true,
        'showCancelButton' => true,
        'cancelButtonText' => 'No',
        'confirmButtonColor' => '#3085d6',
        'cancelButtonColor' => '#d33'
    ]
]

Customizations

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

[
  'customClass' => [
    'container' => '',
    'popup' => '',
    'header' => '',
    'title' => '',
    'closeButton' => '',
    'icon' => '',
    'image' => '',
    'content' => '',
    'htmlContainer' => '',
    'input' => '',
    'inputLabel' => '',
    'validationMessage' => '',
    'actions' => '',
    'confirmButton' => '',
    'denyButton' => '',
    'cancelButton' => '',
    'loader' => '',
    'footer' => ''
   ]
];

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 erezojantinn@gmail.com instead of using the issue tracker.

License

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

arnoldwamae/livewire-alert 适用场景与选型建议

arnoldwamae/livewire-alert 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 254 次下载、GitHub Stars 达 1，最近一次更新时间为 2025 年 02 月 25 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「laravel」「alert」「livewire」「jantinnerezo」「livewire-alert」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 arnoldwamae/livewire-alert 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 arnoldwamae/livewire-alert 我们能提供哪些服务？

定制开发 / 二次开发

基于 arnoldwamae/livewire-alert 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 arnoldwamae/livewire-alert 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

lunarphp/livewire-starter-kit 204

Livewire starter kit for Lunar e-commerce.

emmanuel/livewire-datatable-bs4 16

Views for the package MedicOneSystems Livewire Datatables with Bootstrap 4

wika-group/livewire-slide-over 2

Livewire component that provides drawers (slide overs) that support multiple children while maintaining state.

codespb/livewire-notifier 20

Simple Livewire notifications system without any dependencies except TALL-stack.

lee-to/laravel-phone-auth 18

Laravel+livewire phone auth module

kostikpenzin/yii2-slackbot 1

Yii bot for sending messages (alerts) to Slack

arnoldwamae/livewire-alert

包简介

关键字：