Notifications with toastr and Laravel

toastr is a JavaScript library that allows to display nice user notifications in your web application. In this blog post we will see how to integrate toastr in a Laravel project.

Installation

You can install toastr with npm:

npm install toastr

Then, in resources/js/app.js you can load the library, and define the default options:

// toastr
// https://cylab.be/blog/219/notifications-with-toastr-and-laravel
window.toastr = require('toastr');
window.toastr.options = {
  "progressBar": true
};

You can experiment different options on the online demo : https://codeseven.github.io/toastr/demo.html

Likewize, in resources/sass/app.scss you can load the CSS code of toastr:

@import 'toastr';

Now you can rebuild the JS and CSS files of you app:

npm run prod

A first test

In one of your views, you can now test that toastr is installed correctly:

<script>
  window.addEventListener('load', function() {
    toastr.info('Are you the 6 fingered man?');
  });
</script>

This should display a notification similar to the one below:

Obviously, we would like to take advantage of Laravel sessions, so we can easily display notifications from our controllers… Therefore, we will add 2 components:

1. a view snippet to display notifications from the session
2. a helper class to save notification messages to the session

Displaying notifications from the session

To display notifications messages saved in the session, create a view snippet with the following content, in resources/views/snippets/toastr.blade.php for example:

<script>
    window.addEventListener('load', function() {
        @if (Session::has('toastr-info'))
            @foreach (Session::pull('toastr-info') as $message)
              toastr.info('{{ $message }}');
            @endforeach
        @endif

        @if (Session::has('toastr-warning'))
            @foreach (Session::pull('toastr-warning') as $message)
              toastr.info('{{ $message }}');
            @endforeach
        @endif

        @if (Session::has('toastr-success'))
            @foreach (Session::pull('toastr-success') as $message)
              toastr.info('{{ $message }}');
            @endforeach
        @endif

        @if (Session::has('toastr-error'))
            @foreach (Session::pull('toastr-error') as $message)
              toastr.info('{{ $message }}');
            @endforeach
        @endif
    });
</script>

In your main layout (usually resources/views/layouts/app.blade.php), you can include this snippet with

@include('snippets.toastr')

Helper class

To easily save notification messages to the session, create a class app/Toastr.php with the following content:

<?php

namespace App;

/**
 * Helper class to display notifications with toastr
 * https://cylab.be/blog/219/notifications-with-toastr-and-laravel
 *
 * @author Thibault Debatty
 */
class Toastr {
    public static function info(string $msg)
    {
        session()->push('toastr-info', $msg);
    }

    public static function warning(string $msg)
    {
        session()->push('toastr-warning', $msg);
    }

    public static function success(string $msg)
    {
        session()->push('toastr-success', $msg);
    }

    public static function error(string $msg)
    {
        session()->push('toastr-error', $msg);
    }
}

Usage

Now, from anywhere in your code, you can display notifications with:

AppToastr::info("This is an info message....");
AppToastr::warning("This is a warning....");
AppToastr::success("This is a success message....");
AppToastr::error("This is an error message....");

This blog post is licensed under CC BY-SA 4.0