Livewire Package to display Toast Notification based on TALL Stack.

Overview

livewire-toast

Livewire Package to display Toast Notification based on TALL Stack.

Requirements

Make sure that Livewire is installed properly on your project.

Make sure that TailwindCSS is installed properly on your project.

Make sure that AlpineJS is installed properly on your project.

Installation

You can install the Package using Composer

composer require ascsoftw/livewire-toast

Usage

Put Livewire-component @livewire('livewire-toast') anywhere into your app layout.

You can then call the Livewire Toast as below:

From Livewire Component

$this->emitTo('livewire-toast', 'show', 'Project Added Successfully'); //Will show Success Message
$this->emitTo('livewire-toast', 'showError', 'There was an Error!'); //Will show error. showError, showWarning, showInfo, showSuccess are supported
$this->emitTo('livewire-toast', 'show', ['type' => 'warning', 'message' => 'This is warning!']); //Can also pass type and message as array

Using Session Flash

session()->flash('livewire-toast', 'Project Added Successfully');
session()->flash('livewire-toast', ['type' => 'error', 'message' => 'There was an Error!']);

From Livewire View

$emitTo('livewire-toast', 'show', 'Project Added Successfully'); //Will show Success Message
$emitTo('livewire-toast', 'showError', 'There was an Error!'); //Will show error. showError, showWarning, showInfo, showSuccess are supported
$emitTo('livewire-toast', 'show', {'type' : 'warning', 'message' : 'This is warning!'}); //Can also pass type and message as object

From JS

Livewire.emitTo('livewire-toast', 'show', 'Project Added Successfully'); //Will show Success Message
Livewire.emitTo('livewire-toast', 'showError', 'There was an Error!'); //Will show error. showError, showWarning, showInfo, showSuccess are supported
Livewire.emitTo('livewire-toast', 'show', {'type' : 'warning', 'message' : 'This is warning!'}); //Can also pass type and message as object

Configurations

If you want to override the configurations, you must publish the assets using below command

php artisan vendor:publish --tag=config

This will publish the configuration file at config/livewire-toast.php. You can override any configurations.

Name Type Default Description Options
type String success Notification Type success, warning, error, info
position String bottom-right Part of the screen where notifications will pop out bottom-right, bottom-left, top-right, top-left
duration Number 3000 Time (in ms) to keep the notification on screen (if negative - notification will stay forever or until clicked)
showIcon Boolean true Whether to show icon next to message.
hideOnClick Boolean true Close notification when clicked
color.bg.success String green Color for Success Notification. Must be available in TailwindCss
color.bg.warning String yellow Color for Warning Notification. Must be available in TailwindCss
color.bg.info String blue Color for Info Notification. Must be available in TailwindCss
color.bg.error String red Color for Error Notification. Must be available in TailwindCss
text_color String white Text Color used by TailwindCss class. If using color other than white or black, provide full color like red-300.
transition Boolean true Whether to use Transition to hide/show Notification
transition_type String appear_from_above Transition Type appear_from_below, appear_from_above, appear_from_left, appear_from_right, zoom_in, rotate

You can also publish the View using below command

php artisan vendor:publish --tag=views

This will publish the Views in resources/views/vendor/livewire-toast directory which you can then customize.

Troubleshooting

Your messages don't get styles while using TailwindCss? Please publish your view. Therefore Laravel Mix compiler will find package related views and will purge CSS accordingly.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Credits

License

MIT

You might also like...
A filterable git commit summary notification mailer
A filterable git commit summary notification mailer

Git commit notification A symfony application to allow receiving commit notification for all commits in a certain time period. Features: Receive one m

Bootstrap 4 & 5 replacement for jGrowl notification
Bootstrap 4 & 5 replacement for jGrowl notification

XoopsGrowl module for XOOPS CMS 2.5.11+ XoopsGrowl is a module for XOOPS CMS to configure an alternative to the jGrowl notification using Bootstrap Al

Bootstrap 4 & 5 replacement for jGrowl notification
Bootstrap 4 & 5 replacement for jGrowl notification

XoopsGrowl module for XOOPS CMS 2.5.11+ XoopsGrowl is a module for XOOPS CMS to configure an alternative to the jGrowl notification using Bootstrap Al

Lark Notification Channel for laravel.

Lark notifications channel for Laravel This package makes it easy to send Lark using the Laravel notification system. Supports 5.5+, 6.x, 7.x and 8.x.

AmaranJS stylish notification for your laravel application.

AmaranJS Laravel 5 Package AmaranJS L5 package is a Laravel wrapper for my jquery plugin AmaranJS.You can create easy and stylish notifications with A

An SMS notification channel for the PHP framework Laravel.

Laravel SMS notification channel An SMS notification channel for the PHP framework Laravel. Supported SMS gateways: 46elks Cellsynt Telenor SMS Pro Tw

Laravel notification manager

Easily manage notifications and notification subscriptions in your Laravel application.

WordPress Notification plugin
WordPress Notification plugin

Notification This is the public repository for Notification - the WordPress plugin. This plugin allow you to send custom notifications about various e

Laravel FCM (Firebase Cloud Messaging) Notification Channel

Laravel FCM Notification Laravel FCM (Firebase Cloud Messaging) Notification Channel Use this package to send push notifications via Laravel to Fireba

Comments
  • Styles dont publish because they dont exist

    Styles dont publish because they dont exist

    Since the template has things like {{$bgColorCss}} instead of the color and same with position, thus postcss isnt going to see the actual classes and include them instead of purging them. How do we solve this?

    opened by MACscr 1
  • The background of the icon is deformed when the notification text is long

    The background of the icon is deformed when the notification text is long

    Thanks for your wonderful contribution, at the first. Due to my development needs I have some notifications which are larger than one row, so I found that it makes an uggly effect on the background of the icon, because the flex condition for the div. I fixed it by publishing views and adding items-start class to flex div. The final container looks like: <div class="flex items-start bg-{{$bgColorCss}}-500 border-l-4 border-{{$bgColorCss}}-700 py-2 px-3 shadow-md mb-2 ">

    Regards

    opened by faridsa 0
Releases(1.0.1)
Owner
AscSoftwares
Web Development Agency
AscSoftwares
Laravel package to launch toast notifications.

Laravel package to launch toast notifications. This package provides assistance when using toast notifications. Using the iziTOAST package, which allo

Anthony Medina 7 Nov 25, 2022
Our Laravel Sendgrid Notification package

laravel-sendgrid-notification-channel Laravel Sendgrid Notification channel Installation To get started, you need to require this package: composer re

Konstruktiv B.V. 4 Feb 3, 2022
Lara-Izitoast : Laravel Notification Package

Lara-Izitoast : Laravel Notification Package This is a laravel notification wrapper build with http://izitoast.marcelodolce.com javascript library. Ho

Apps:Lab KE 34 Nov 19, 2022
Notification package for Laravel

Package is looking for maintainers Please contact me if interested. Notification package for Laravel4 / Laravel5 A simple notification management pack

Edvinas Kručas 531 Oct 12, 2022
@Authy notification channel for @Laravel, with the ability to send in-app, sms, and call verification tokens.

Authy Notification Channel for Laravel Authy notification channel for Laravel, with the ability to send in-app, sms, and call verification tokens. Tab

Laravel Notification Channels 57 Dec 19, 2022
Google Chat - Laravel Notification Channel

Google Chat - Laravel Notification Channel This package makes it easy to send notifications using Google Chat , (formerly known as Hangouts Chat) with

Laravel Notification Channels 36 Dec 6, 2022
Multiple channels of laravel exception notification(DingTalk、FeiShu、ServerChan、WeWork、XiZhi). - 多种通道的 laravel 异常通知(钉钉群机器人、飞书群机器人、Server 酱、企业微信群机器人、息知)。

laravel-exception-notify 简体中文 | ENGLISH Multiple channels of laravel exception notification(DingTalk、FeiShu、ServerChan、WeWork、XiZhi). - 多种通道的 laravel

guanguans 61 Dec 8, 2022
ApnsPHP: Apple Push Notification & Feedback Provider

ApnsPHP: Apple Push Notification & Feedback Provider A full set of open source PHP classes to interact with the Apple Push Notification service for th

Immobiliare Labs 1.4k Nov 16, 2022
Laravel SMS Notification Channel

Laravel SMS Notification Channel Installation composer require guangda/laravel-sms-notification-channel env 配置 SMS_PROVIDER=yunpian SMS_SIGNATURE=【签名

Guangda 6 Dec 29, 2021
Slack notification for Laravel as it should be. Easy, fast, simple and highly testable.

Based on illuminate/mail About Laravel Slack Slack notification for Laravel as it should be. Easy, fast, simple and highly testable. Since it uses On-

Guilherme Pressutto 284 Aug 24, 2022