Toastr.js notifications for Laravel 5 and Lumen

For more drivers (toastr, pnotify, sweetalers2) please try the new package yoeunes/notify

👀 This package helps you to add toastr.js notifications to your Laravel 5 and Lumen projects.

Install

You can install the package using composer

$ composer require yoeunes/toastr

Then add the service provider to config/app.php. In Laravel versions 5.5 and beyond, this step can be skipped if package auto-discovery is enabled.

'providers' => [
    ...
    Yoeunes\Toastr\ToastrServiceProvider::class
    ...
];

As optional if you want to modify the default configuration, you can publish the configuration file:

$ php artisan vendor:publish --provider='Yoeunes\Toastr\ToastrServiceProvider' --tag="config"

For Lumen :

In bootstrap/app.php
- uncomment $app->withFacades();
- add bindings for ToastrServiceProvider : $app->register(Yoeunes\Toastr\ToastrServiceProvider::class);
Add config/session.php, since it is not present in Lumen by default. You can take session.php from Laravel Official Repository

Usage:

Include jQuery and toastr.js in your view template:

Link to jquery <script src="jquery.min.js"></script> or from cdn with our custom blade directive @jquery
Link to toastr.css <link href="toastr.css" rel="stylesheet"/> or @toastr_css
Link to toastr.js <script src="toastr.js"></script> or @toastr_js

The custom directives @jquery, @toastr_css, @toastr_js pulls the latest version for jquery and toastr from cdn.js, you could also pass a specified version a first parameter: @jquery(3.2), @toastr_css(2.1.4) and @toastr_js(2.1.4)

use toastr() helper function inside your controller to set a toast notification for info, success, warning or error

// Display an info toast with no title
toastr()->info('Are you the 6 fingered man?')

as an example:

<?php

namespace App\Http\Controllers;

use App\Post;
use App\Http\Requests\PostRequest;
use Illuminate\Database\Eloquent\Model;

class PostController extends Controller
{
    public function store(PostRequest $request)
    {
        $post = Post::create($request->only(['title', 'body']));

        if ($post instanceof Model) {
            toastr()->success('Data has been saved successfully!');

            return redirect()->route('posts.index');
        }

        toastr()->error('An error has occurred please try again later.');

        return back();
    }
}

After that add the @toastr_render at the bottom of your view to actualy render the toastr notifications.

<!doctype html>
<html>
    <head>
        <title>Toastr.js</title>
        @toastr_css
    </head>
    <body>
        
    </body>
    @jquery
    @toastr_js
    @toastr_render
</html>

Other Options

// Set a warning toast, with no title
toastr()->warning('My name is Inigo Montoya. You killed my father, prepare to die!')

// Set a success toast, with a title
toastr()->success('Have fun storming the castle!', 'Miracle Max Says')

// Set an error toast, with a title
toastr()->error('I do not think that word means what you think it means.', 'Inconceivable!')

// Override global config options from 'config/toastr.php'

toastr()->success('We do have the Kapua suite available.', 'Turtle Bay Resort', ['timeOut' => 5000])

Limit the number of displayed toastrs

To limit the number of displayed toastrs set the value maxItems in the config file to an integer value, you can also set it per action in your controller like this:

toastr()->success('Have fun storming the castle!', 'Miracle Max Says');
toastr()->error('I do not think that word means what you think it means.', 'Inconceivable!'); // i want to display this one
toastr()->info('Are you the 6 fingered man?'); // and this one

toastr()->maxItems(2);

now if you call the render method the last two notifications will be displayed

Other api methods:

// You can also chain multiple messages together using method chaining

toastr()->info('Are you the 6 fingered man?')->success('Have fun storming the castle!')->warning('doritos');

// @jquery, @toastr_css and @toastr_js is an alias for helper functions:

function jquery(string $version = '3.3.1', string $src = null);
function toastr_css(string $version = '2.1.4', string $href = null);
function toastr_js(string $version = '2.1.4', string $src = null);

// you could replace @toastr_render by :

toastr()->render() or app('toastr')->render()

// you can use toastr('') instead of toastr()->success()

function toastr(string $message = null, string $type = 'success', string $title = '', array $options = []);

toastr($message) is equivalent to toastr()->success($message)
toastr($message, 'info') is equivalent to toastr()->info($message)
toastr($message, 'warning') is equivalent to toastr()->warning($message)
toastr($message, 'error') is equivalent to toastr()->error($message)

configuration:

// config/toastr.php
<?php

return [
    // Limit the number of displayed toasts, by default no limits
    'maxItems' => null,
    
    'options' => [
        'closeButton'       => true,
        'closeClass'        => 'toast-close-button',
        'closeDuration'     => 300,
        'closeEasing'       => 'swing',
        'closeHtml'         => '<button><i class="icon-off"></i></button>',
        'closeMethod'       => 'fadeOut',
        'closeOnHover'      => true,
        'containerId'       => 'toast-container',
        'debug'             => false,
        'escapeHtml'        => false,
        'extendedTimeOut'   => 10000,
        'hideDuration'      => 1000,
        'hideEasing'        => 'linear',
        'hideMethod'        => 'fadeOut',
        'iconClass'         => 'toast-info',
        'iconClasses'       => [
            'error'   => 'toast-error',
            'info'    => 'toast-info',
            'success' => 'toast-success',
            'warning' => 'toast-warning',
        ],
        'messageClass'      => 'toast-message',
        'newestOnTop'       => false,
        'onHidden'          => null,
        'onShown'           => null,
        'positionClass'     => 'toast-top-right',
        'preventDuplicates' => true,
        'progressBar'       => true,
        'progressClass'     => 'toast-progress',
        'rtl'               => false,
        'showDuration'      => 300,
        'showEasing'        => 'swing',
        'showMethod'        => 'fadeIn',
        'tapToDismiss'      => true,
        'target'            => 'body',
        'timeOut'           => 5000,
        'titleClass'        => 'toast-title',
        'toastClass'        => 'toast',
    ],
];

For a list of available options, see toastr.js' documentation.

Credits

License

MIT

edalicioh / toastr