PHPackages                             codespb/livewire-notifier - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. codespb/livewire-notifier

ActiveLibrary

codespb/livewire-notifier
=========================

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

1.0.3(5y ago)203414[1 issues](https://github.com/codespb/livewire-notifier/issues)[1 PRs](https://github.com/codespb/livewire-notifier/pulls)MITPHPCI failing

Since Apr 10Pushed 3y ago2 watchersCompare

[ Source](https://github.com/codespb/livewire-notifier)[ Packagist](https://packagist.org/packages/codespb/livewire-notifier)[ Docs](https://github.com/codespb/livewire-notifier)[ RSS](/packages/codespb-livewire-notifier/feed)WikiDiscussions main Synced today

READMEChangelog (4)Dependencies (9)Versions (4)Used By (0)

Livewire - Notifier
===================

[](#livewire---notifier)

[![Latest Stable Version](https://camo.githubusercontent.com/367ae69f842e438be02ae3f0db64a487006c0ec1fef596609d3a27f892771f4d/68747470733a2f2f706f7365722e707567782e6f72672f636f64657370622f6c697665776972652d6e6f7469666965722f76)](//packagist.org/packages/codespb/livewire-notifier) [![run-tests](https://github.com/codespb/livewire-notifier/actions/workflows/run-tests.yml/badge.svg)](https://github.com/codespb/livewire-notifier/actions/workflows/run-tests.yml) [![Total Downloads](https://camo.githubusercontent.com/730a9071e860ac236478ff3f4c78320bd20865ff0d174b24f48159985a09bb0b/68747470733a2f2f706f7365722e707567782e6f72672f636f64657370622f6c697665776972652d6e6f7469666965722f646f776e6c6f616473)](//packagist.org/packages/codespb/livewire-notifier) [![License](https://camo.githubusercontent.com/25a8331273ba0fe5f80268b8e53eb2ff5febc44e7a48688b4d7dd5cf77616be3/68747470733a2f2f706f7365722e707567782e6f72672f636f64657370622f6c697665776972652d6e6f7469666965722f6c6963656e7365)](//packagist.org/packages/phpunit/phpunit)

Livewire Notifier is a simple notifications system with zero dependencies above [TALL-stack](https://tallstack.dev/) (Tailwind CSS, Alpine.JS, Laravel and Livewire).

 [![Livewire Notifier](https://github.com/codespb/livewire-notifier/raw/main/screenshots/livewire-notifier.jpg?raw=true)](https://github.com/codespb/livewire-notifier/blob/main/screenshots/livewire-notifier.jpg?raw=true)

Requirements
------------

[](#requirements)

Make sure that [Livewire](https://laravel-livewire.com/) and [Alpine.JS](https://github.com/alpinejs/alpine) are installed properly. The easiest way to do it is to install [Laravel Jetstream](https://jetstream.laravel.com) 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:

```
…

…

…

…

```

Installation
------------

[](#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](https://github.com/codespb/livewire-notifier/raw/main/screenshots/livewire-notifier-basic.jpg?raw=true)](https://github.com/codespb/livewire-notifier/blob/main/screenshots/livewire-notifier-basic.jpg?raw=true)

Usage
-----

[](#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-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

[](#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

[](#frontend)

Add new message from javascript:

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

### Example

[](#example)

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

```

    Success
    Error
    Warning
    Info
    Default

```

Config file
-----------

[](#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.

```