README

Installation

You can install the package via composer:

composer require marjose/laravel-bootstrap-notify

You can publish the assets with:

php artisan vendor:publish --provider="Marjose\notify\notifyServiceProvider" --tag="notify-assets"

You can publish the views with:

php artisan vendor:publish --provider="Marjose\notify\notifyServiceProvider" --tag="notify-views"

You can publish the config file with:

php artisan vendor:publish --provider="Marjose\notify\notifyServiceProvider" --tag="notify-config"

This is the contents of the published config file:

return [
    /*
    |--------------------------------------------------------------------------
    | Notification timeout
    |--------------------------------------------------------------------------
    |
    | Defines the number of seconds during which the notification will be visible.
    |
    */

    'timeout'   => 5000,
    
    /*
    |--------------------------------------------------------------------------
    | Preset Messages
    |--------------------------------------------------------------------------
    |
    | Define any preset messages here that can be reused.
    |
    */

    'preset-messages' => [
        // An example preset 'user updated' Connectify notification.
        'user-updated' => [
            'message' => 'The user has been updated successfully.',
            'type'    => 'success',
            'icon'    => 'fas fa-thumbs-up fa-3x',
            'model'   => null,
            'title'   => 'User Updated',
        ],
    ],
];

Now that we have published a few new files to our application we need to reload them with the following command:

composer dump-autoload

Prerequisites

Add styles links with

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/regular.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/solid.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/brands.min.css">

Add js link with

@notifyJs
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/js/fontawesome.min.js"></script>

Include notify partial to your master layout

@include('notify::components.notify')

If you are on Laravel 7 or greater, you can use the tag syntax.

<x:notify-messages/>

Usage

Within your controllers, before you perform a redirect call the notify method with a message. By default Laravel Bootstrap Notify used Fontawesome for the icons.

public function store()
{
    notify()->success('Laravel Notify is awesome!');

    return Redirect::home();
}

A complete example:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/regular.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/solid.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/brands.min.css">
        <!-- Fonts -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">



        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </head>
    <body>
            <x:notify-messages/>
        @notifyJs
    <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/js/fontawesome.min.js"></script>
    </body>
</html>

Types of alerts

notify()->success($message);
notify()->error($message);
notify()->info($message);
notify()->warning($message);

You can also use a custom or pre-defined alert by adding it to the config under the preset.

'user-updated' => [
            'message' => 'The user has been updated successfully.',
            'type'    => 'success',
            'icon'    => 'fas fa-thumbs-up fa-3x',
            'model'   => null,
            'title'   => 'User Updated',
        ],

how to use the preset, you need to use notify facades

use Marjose\notify\notify;
notify::preset('user-updated');

Advance

You can use different Icon css framework like Fontawesome, Bootstrap Icon, and many others if you use the preset functionality.

If you want to modify the styling of the alert you are free to make any change of the component in the views/vendor/notify/notification

Other

if you are looking for the same but for TailwindCss you can visit this guy.

mckenziearts

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.

marjose / laravel-bootstrap-notify

Maintainers

Details