Livewire Notifier is a simple notifications system with zero dependencies above TALL-stack

Related tags

Laravel livewire-notifier
Overview

Livewire - Notifier

Latest Stable Version run-tests Total Downloads License

Livewire Notifier is a simple notifications system with zero dependencies above TALL-stack (Tailwind CSS, Alpine.JS, Laravel and Livewire).

Livewire Notifier

Requirements

Make sure that Livewire and Alpine.JS are installed properly. The easiest way to do it is to install Laravel Jetstream with Livewire stack (post-install command php artisan jetstream:install livewire).

Alpine.JS must be imported in resources/js/app.js package:

import 'alpinejs'

Livewire scripts and styles tags must be present in the layout file:

…
<head>
…
    <livewire:styles/>
…
head>
<body>
…
    <livewire:scripts/>
body>
html>

Installation

Via Composer

$ composer require codespb/livewire-notifier

Proceed with installation process:

$ php artisan livewire-notifier:install

Afterwards the package config can be found at config/livewire-notifier.php and views at resources/views/vendor/livewire-notifier/.

It's required because of Tailwind config is needed to be extended with new purge paths.

Otherwise you won't see messages styled properly.

Livewire Notifier

Usage

Put Livewire-component into the app layout. Make sure to insert it into correct context because it may be positioned absolutely.

Now you can use it from frontend and backend both.

Message options

Message added at backend (from any Livewire component) must have type of array. Message added at frontend (from JavaScript) must have type of object.

$message = [
        'text' => __('Post is saved!'),
        'title' => '', // Optional
        'type' => 'success', // Optional. By default: success | optional: error (or fail), warning (or warn), info
        // you can find all types options in the config file
        'icon' => '', // Optional. It replaces the default type icon. Can be pure html or svg code

        // Attention! The following options override ones from the config file

        'duration' => 5000, // Optional. The time of message to be shown. To show infinitely set to 0
        'msgClass' =>  'bg-gradient-to-r from-green-200 to-green-300', // Optional. Tailwind class for message container
        'progressClass' =>  'bg-green-500', // Optional. Tailwind class for progress bar. If null progress bar won't be shown
        'closable' => false, // Optional. True by default. Whether message is closable by click on message or Esc key press on window
    ]
let message = {
    text: 'Post is saved!'
}

Backend

Livewire event

From any Livewire component push emit trigger to render new message.

public function save(){
    ...
    $this->emitTo('notifier','message',['text'=>__('The post is saved!')]);
}

Session flash variable

public function save(){
    ...
    session()->flash('notifier',['text'=>__('The post is saved!')]);
    return $this->redirect(route('posts'));
}

Frontend

Add new message from javascript:

Livewire.emitTo('notifier','message',{text:'The post is saved!'})

Example

Try to put the following code (with Laravel Jetstream w/Livewire stack installed):

Success Error Warning Info Default
"> 
<div class="flex flex-row space-x-4">
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Success',type:'success'})">Successx-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Error',type:'error'})">Errorx-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Warning',type:'warning'})">Warningx-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Info',type:'info'})">Infox-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Default',type:'default'})">Defaultx-jet-button>
div>

Config file

After php artisan livewire-notifier:install command is fired, config file will be published to config/livewire-notifier.php. There you can change some value for customization.


return [
    // Messages container positioning
    'positionClass' => 'absolute top-0 right-0',
    // Default message Tailwind stylinh
    'defaultMsgClass' => 'w-80 rounded-xl shadow-xl',
    // Time of each message to be shown by default
    'duration' => 2200,
    // Messages types
    'types' => [
        'success' => [
            // 'msgClass'=>'bg-green-200',
            'msgClass'=>'bg-gradient-to-r from-green-200 to-green-300',
            'progressClass' => 'bg-green-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.success',
        ],
        'error' => [
            // 'msgClass'=>'bg-red-200',
            'msgClass'=>'bg-gradient-to-r from-red-200 to-red-300',
            'progressClass' => 'bg-red-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'fail' => [
            // 'msgClass'=>'bg-red-200',
            'msgClass'=>'bg-gradient-to-r from-red-200 to-red-300',
            'progressClass' => 'bg-red-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'warning' => [
            // 'msgClass'=>'bg-yellow-200',
            'msgClass'=>'bg-gradient-to-r from-yellow-200 to-yellow-300',
            'progressClass' => 'bg-yellow-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'warn' => [
            // 'msgClass'=>'bg-yellow-200',
            'msgClass'=>'bg-gradient-to-r from-yellow-200 to-yellow-300',
            'progressClass' => 'bg-yellow-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'info' => [
            // 'msgClass'=>'bg-blue-200',
            'msgClass'=>'bg-gradient-to-r from-blue-200 to-blue-300',
            'progressClass' => 'bg-blue-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.info',
        ],
        'default' => [
            // 'msgClass'=>'bg-gray-200',
            'msgClass'=>'bg-gradient-to-r from-gray-200 to-gray-300',
            'progressClass' => 'bg-gray-700',
            // View for icon
            'icon' => 'livewire-notifier::icons.info',
        ]
    ]
];

Troubleshooting

Your messages don't get any styles? Please, run livewire-notifier:install command to publish views. Therefore Laravel Mix compiler will find package Blade-views and will purge CSS properly.

Updating

Simply update like all other packages with composer update. Be sure to run livewire-notifier:install to updated published views.

Change log

Please see the changelog for more information on what has changed recently.

Testing

$ composer test

Contributing

Please see contributing.md for details and a todolist.

Security

If you discover any security related issues, please email author email instead of using the issue tracker.

Credits

License

Please see the license file for more information.

You might also like...
Real world Conduit App based on Laravel Livewire stack

Laravel Livewire codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API. Demo Github

Ricardo Sawir 18 Nov 14, 2022
Laravel-comments-livewire - Livewire components for the laravel-comments package
Laravel-comments-livewire - Livewire components for the laravel-comments package

Associate comments and reactions with Eloquent models This package contains Livewire components to be used with the spatie/laravel-comments package. S

Spatie 15 Jan 18, 2022
🚀 Zero-downtime deployment out-of-the-box

🚀 Laravel Deployer Looking for the old Laravel Deployer? Click here. Laravel Deployer is no longer the package it used to be. Since that package was

Loris Leiva 1.6k Dec 31, 2022
Projeto de um blog chamado Blog Codar feito durante o curso PHP: Do zero a maestria, ministrado pelo Matheus Baptisti

PJ- Blog Codar Este projeto é um blog fictício. Apesar de poder ser usado como um blog real, este projeto não tem conexão com banco de dados, então es

João Pedro Sassi Granado 4 Nov 5, 2021
Projeto de uma rede social de Filmes feito durante o curso PHP: Do zero a maestria, ministrado pelo Matheus Baptisti
Projeto de uma rede social de Filmes feito durante o curso PHP: Do zero a maestria, ministrado pelo Matheus Baptisti

PJ - Moviestar Este projeto é uma rede social quase completa. O objeto de estudo aqui é a conexão de PHP + BD, PHP e a WEB, Regras de negócio complexa

João Pedro Sassi Granado 6 Jul 17, 2022
Criação de um framework mvc do zero para estudo

PHP + PostgreSQL + PGAdmin4 + Composer A complete template for small projects Running the project To run this project you only need to run docker-comp

Eduardo Compiani 2 Jan 24, 2022
Laravel package for creating Word documents with Eloquent ORM dependencies.

Laravel Eloquent Word This package provides an elegant way to generate Word documents with Eloquent Models. Uses PHPOffice/PHPWord package to generate

Marvin Quezon 6 Aug 5, 2022
Simple CRUD + Search using Laravel 8 and Livewire 2

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

PowPow 11 Sep 29, 2022
Laravel Authentication Log is a package Log user authentication details and send new device notifications.
Laravel Authentication Log is a package Log user authentication details and send new device notifications.

Laravel Authentication Log is a package which tracks your user's authentication information such as login/logout time, IP, Browser, Location, etc. as well as sends out notifications via mail, slack, or sms for new devices and failed logins.

Anthony Rappa 540 Jan 5, 2023
Releases(v1.0.3)
Owner
CodeSPB
Enthusiastic developers group from Saint-Petersburg / Russia
CodeSPB
GitHub
Collection of agnostic PHP Functions and helpers with zero dependencies to use as foundation in packages and other project

Collection of agnostic PHP Functions and helpers This package provides a lot of very usefull agnostic helpers to use as foundation in packages and oth

padosoft 54 Sep 21, 2022
Laravel Package to generate CRUD Files using TALL Stack

tall-crud-generator Laravel Package to generate CRUD Files using TALL Stack Requirements Make sure that Livewire is installed properly on your project

AscSoftwares 75 Jan 2, 2023
Gallium is a TALL stack starter kit offering a robust set of options enabling you to get up and running in a snap.

Very short description of the package This is where your description should go. Try and limit it to a paragraph or two, and maybe throw in a mention o

null 1 Nov 20, 2021
A collection of tools for rapidly building beautiful TALL stack interfaces, designed for humans.

Filament is a collection of tools for rapidly building beautiful TALL stack interfaces, designed for humans. Packages Admin Panel • Documentation • De

Filament 5.4k Jan 4, 2023
Automated Laravel TALL-stack installation with superpowers.

Easy command to install the TALL-stack & jumpstart development ?? This package provides a simple artisan command for Laravel that can fully scaffold y

Ralph J. Smit 38 Dec 3, 2022
Example of using TALL stack to select country phone code.

Select country phone code using TALL stack About Example of using TALL stack to select country phone code. Each item represents a country. Each item h

Fernando Chagas 3 Jul 27, 2022
Source for "Getting Started with TALL stack" post

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Kim Hallberg 2 Sep 16, 2022
A TALL-based Laravel Livewire component to replace the (multiple) select HTML input form with beautiful cards.

TALL multiselect cards A TALL-based Laravel Livewire component to replace the (multiple) select HTML input form with beautiful cards. Table of content

Frederic Habich 19 Dec 14, 2022
A TALL (Tailwind CSS, Alpine.js, Laravel and Livewire) Preset for Laravel

Laravel TALL Preset A front-end preset for Laravel to scaffold an application using the TALL stack, jumpstarting your application's development. If yo

Laravel Frontend Presets 1.8k Jan 7, 2023
Sweetalert and Toaster notifications for Laravel livewire with support for tailwind and bootstrap.

Larabell Integrate livewire with sweetalert. Installation How to use Sweetalert Toast Available configuration Installation composer require simtabi/la

Simtabi 3 Jul 27, 2022