PHPackages                             daredloco/tall-toasts - 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. daredloco/tall-toasts

ActiveLibrary

daredloco/tall-toasts
=====================

A Toast notification library for the Laravel TALL stack. You can push notifications from the backend or frontend to render customizable toasts with almost zero footprint on the published CSS/JS!

v3.2.0(1mo ago)0412MITPHPPHP ^8.0|^8.1

Since May 25Pushed 1mo agoCompare

[ Source](https://github.com/daredloco/tall-toasts)[ Packagist](https://packagist.org/packages/daredloco/tall-toasts)[ Docs](https://github.com/usernotnull/tall-toasts)[ GitHub Sponsors](https://github.com/usernotnull)[ RSS](/packages/daredloco-tall-toasts/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (4)Dependencies (28)Versions (5)Used By (0)

Beautiful Notification Toasts For Laravel & Livewire
========================================================

[](#beautiful-notification-toasts-for-laravel--livewire)

A Toast global that can be called from the backend (via Controllers, Blade Views, Components) or frontend (JS, Alpine Components) to render customizable toasts.

Runs with the TALL stack: [Laravel](https://laravel.com/docs/10.x/installation), [TailwindCSS](https://tailwindcss.com/docs/guides/laravel), [Livewire](https://laravel-livewire.com/docs/2.x/installation), [AlpineJS](https://alpinejs.dev/essentials/installation).

[![GitHub tag (latest SemVer)](https://camo.githubusercontent.com/9e046e3eaf934e8c43f6086f32f8d72059d93ad3db4e259eeb95fddf71248ee8/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f7461672f757365726e6f746e756c6c2f74616c6c2d746f617374733f6c6162656c3d72656c6561736526736f72743d73656d766572267374796c653d706c6173746963)](https://github.com/usernotnull/tall-toasts/releases)[![Build size Brotli](https://camo.githubusercontent.com/47a50a3503af2f09183ec5ca95e6a4243220ec091f6df1f30aeee8d24be01c55/68747470733a2f2f696d672e626164676573697a652e696f2f757365726e6f746e756c6c2f74616c6c2d746f617374732f6d61696e2f646973742f6a732f74616c6c2d746f617374732e6a732e7376673f636f6d7072657373696f6e3d62726f746c69267374796c653d706c617374696326636f6c6f723d677265656e266c6162656c3d4a5325323073697a65)](https://github.com/usernotnull/tall-toasts/blob/main/dist/js/tall-toasts.js)
[![Scrutinizer Score](https://camo.githubusercontent.com/797d8f338449a130f2bec5467247f85e26ae9a1ae9d42dac28017c4c8dd0e065/68747470733a2f2f696d672e736869656c64732e696f2f7363727574696e697a65722f672f757365726e6f746e756c6c2f74616c6c2d746f617374732e7376673f7374796c653d706c6173746963266c6162656c3d7363727574696e697a657225323073636f7265)](https://scrutinizer-ci.com/g/usernotnull/tall-toasts)[![Codacy branch grade](https://camo.githubusercontent.com/6cdefbcedfb6650d32bdf3dfe6e203588ecfe48dd095ffb7227e271ac890d019/68747470733a2f2f696d672e736869656c64732e696f2f636f646163792f67726164652f30633662346639366163326134613663626632363566356538323561336664322f6d61696e3f7374796c653d706c6173746963)](https://www.codacy.com/gh/usernotnull/tall-toasts/dashboard?utm_source=github.com&utm_medium=referral&utm_content=usernotnull/tall-toasts&utm_campaign=Badge_Grade)
[![Codecov branch](https://camo.githubusercontent.com/e0bd09bb64768a83bdd2dd43d63ef2b4aec6c5aec4aa8f6b3a231f54f4a4d147/68747470733a2f2f696d672e736869656c64732e696f2f636f6465636f762f632f6769746875622f757365726e6f746e756c6c2f74616c6c2d746f617374732f6d61696e3f7374796c653d706c6173746963)](https://app.codecov.io/gh/usernotnull/tall-toasts)

LightDark[![toast-light](/.github/images/light.gif)](/.github/images/light.gif)[![toast-dark](/.github/images/dark.gif)](/.github/images/dark.gif)

Featured On
-----------

[](#featured-on)

[![Laravel News](https://camo.githubusercontent.com/0d882ce3703deb16b7187dd134c51572d4504801d0ddc332a8d79e051ed9197e/68747470733a2f2f73636f6e74656e742e66617568312d312e666e612e666263646e2e6e65742f762f74312e31383136392d392f31333838363339395f3531343138353236323131343037395f353734373331363534383838333537303837345f6e2e6a70673f5f6e635f6361743d313036266363623d312d37265f6e635f7369643d313734393235265f6e635f6f68633d414a5a57746d373130633441583936396c4847265f6e635f68743d73636f6e74656e742e66617568312d312e666e61266f683d30305f416644706a3547614c383771354663675f4f5f5334687344446d7842787735574f5734454e3433707a7066445551266f653d3634324333304335)](https://laravel-news.com/toast-notifications-for-the-tall-stack) [![madewithlaravel](https://camo.githubusercontent.com/a6a08a81bc5f7617030386b8ba426f4f3ec66651d73cdff3c2ae89121742a751/68747470733a2f2f6d616465776974686c61726176656c2e636f6d2f6d616e64616e742f6d616465776974686c61726176656c2f696d616765732f6c6f676f2e706e67)](https://madewithlaravel.com/tall-toasts) [![Laravel News Podcast](https://camo.githubusercontent.com/31637e0ae37b7b530b781cfe8f6f3fb2d6accb0e6049f8fed5d57221ebf1190c/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f7468756d622f652f65372f506f6463617374735f253238694f532532392e7376672f3230343870782d506f6463617374735f253238694f532532392e7376672e706e67)](https://podcasts.apple.com/us/podcast/laravel-news-podcast/id1051289963?mt=2)

Why
---

[](#why)

If you are building a web app with the TALL stack, you must choose this library over the other outdated libraries available:

### Size does matter

[](#size-does-matter)

Since the frontend is a pure AlpineJS component with no reliance on external JS libs, and since the backend handles most of the logic, the javascript footprint is tiny [(less than ONE kilobyte!)](https://img.badgesize.io/usernotnull/tall-toasts/main/dist/js/tall-toasts.js.svg?compression=brotli&style=plastic&color=green&label=JS%20size).

The CSS footprint is also negligible as it uses the default TailwindCSS classes. Even if you override the default views, you will rest assured that Tailwind's purging will only keep the styles/classes you have used.

In plain English, it will not bloat your generated JS/CSS files nor add extra files to download as when using other JS libs!

### Takes advantage of all the niceties that come with TALL

[](#takes-advantage-of-all-the-niceties-that-come-with-tall)

You can call it from anywhere! Memorize `Toast` for the frontend and `toast()` for the backend.

See the [usage section](#usage) for examples.

### Customizable

[](#customizable)

You have control over the view: As you are overriding the blade view, you'll be able to shape it as you like using TailwindCSS classes.

No more messing with custom CSS overrides!

Usage
-----

[](#usage)

### From The Frontend

[](#from-the-frontend)

```
Toast.info('Notification from the front-end...', 'The Title');

Toast.success('A toast without a title also works');

Toast.warning('Watch out!');

Toast.danger('I warned you!', 'Yikes');

Toast.debug('I will NOT show in production! Locally, I will also log in console...', 'A Debug Message');

Toast.success('This toast will display only for 3 seconds', 'The Title', 3000);

Toast.success('This toast will display until you remove it manually', 'The Title', 0);
```

### From The Backend

[](#from-the-backend)

```
toast()
    ->info('I will appear only on the next page!')
    ->pushOnNextPage();

toast()
    ->info('Notification from the backend...', 'The Title')
    ->push();

toast()
    ->success('A toast without a title also works')
    ->push();

toast()
    ->warning('Watch out!')
    ->push();

toast()
    ->danger('I warned you!', 'Yikes')
    ->push();

toast()
    ->danger('I will go…to the next line 💪', 'I am HOT')
    ->doNotSanitize()
    ->push();

toast()
    ->debug('I will NOT show in production! Locally, I will also log in console...', 'A Debug Message')
    ->push();

// debug also accepts objects as message
toast()
    ->debug(User::factory()->createOne()->only(['name', 'email']), 'A User Dump')
    ->push();

toast()
    ->success('This toast will display only for 3 seconds')
    ->duration(3000)
    ->push();

toast()
    ->success('This toast will display until you remove it manually')
    ->sticky()
    ->push();
```

You can call the above toast helper from controllers, blade views, and components.

Support Me
----------

[](#support-me)

I plan on developing many open-source packages using the TALL stack.
Consider supporting my work by tweeting about this library or by contributing to this package.

Check out the list of other packages I built for the TALL stack [Other Packages](#other-packages).
To stay updated, [follow me on Twitter](https://twitter.com/usernotnull).

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

[](#requirements)

DependencyVersionPHP^8.0Laravel^8.0 | ^9.0 | ^10.0 | ^11.0 | ^12.0TailwindCSS^2.0 | ^3.0Livewire^2.0 | ^3.0 (as of tall-toasts v2)AlpineJS^3.0You can find the older [v1 documentation here](README-v1.md)

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

[](#installation)

You can install the package via [Composer](https://getcomposer.org/):

```
composer require usernotnull/tall-toasts
```

Setup
-----

[](#setup)

### Docker ready

[](#docker-ready)

To make this package work in docker, call

```
php artisan vendor:publish --tag=tall-toasts-js
```

and in app.js

```
import ToastComponent from './vendor/tall-toasts.js'
Alpine.plugin(ToastComponent)
```

### TailwindCSS

[](#tailwindcss)

Build your CSS as you usually do, ie

```
npm run dev
```

#### Usage With Tailwind JIT

[](#usage-with-tailwind-jit)

If you are using [Just-in-Time Mode](https://tailwindcss.com/docs/just-in-time-mode), add these additional lines into your `tailwind.config.js` file:

```
// use `purge` instead of `content` if using TailwindCSS v2.x
content: [
    './vendor/usernotnull/tall-toasts/config/**/*.php',
    './vendor/usernotnull/tall-toasts/resources/views/**/*.blade.php',
    // etc...
]
```

This way, Tailwind JIT will include the classes used in this library in your CSS.

*As usual, if the content of `tailwind.config.js` changes, you should re-run the npm command.*

### Registering Toast with AlpineJS

[](#registering-toast-with-alpinejs)

To make this package work in docker, call

```
php artisan vendor:publish --tag=tall-toasts-js
```

Add the Toast component in your `app.js`:

```
import {Alpine, Livewire} from '../../vendor/livewire/livewire/dist/livewire.esm';
import ToastComponent from '../../vendor/usernotnull/tall-toasts/resources/js/tall-toasts'
//or if using docker:
//import ToastComponent from './vendor/tall-toasts.js'

Alpine.plugin(ToastComponent)

Livewire.start()
```

Add `` **as high as possible** in the body tag, ie:

```
>

    @livewireScriptConfig

```

To properly dispatch toasts from inside your livewire components, **add the trait**:

```
use Livewire\Component;
use Usernotnull\Toast\Concerns\WireToast;

class DemoComponent extends Component
{
    use WireToast; // success('You earned a cookie! 🍪')
            ->pushOnNextPage();

        redirect()->route('dashboard');
    }
```

That's it! 🎉

RTL Support
-----------

[](#rtl-support)

The default layout now supports RTL.

As per TailwindCSS docs on [RTL support](https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support):
`Always set the direction, even if left-to-right is your default`.

```

```

Customization
-------------

[](#customization)

The toasts should look pretty good out of the box. However, we've documented a couple of ways to customize the views and functionality.

### Configuration

[](#configuration)

You can publish the config file with:

```
php artisan vendor:publish --provider="Usernotnull\Toast\ToastServiceProvider" --tag="tall-toasts-config"
```

These are the default contents of the published config file:

```