Code of Relevancy

Posted on May 8, 2023

Take your notifications to the next level with Laravel Notify

#programming #laravel #html #css

Life can get busy sometimes and it's easy to let our passions fall to the wayside. I know how important it is to regularly publish articles and stay engaged with the community. With other responsibilities, it can be challenging to find the time to write.

It's been a month since I last published an article on DEV Community, but I'm excited to be back and sharing my thoughts with the community once again. Thank you for your patience and continued support.

So, without further ado, let's dive right in!!!

Flash notifications are a useful way of providing feedback to users after they perform an action on a website or application. These notifications typically appear for a short period of time before disappearing and can be used to inform the user of the status of the action they have just performed. We will explore how to use the Laravel-Notify package to create flash notifications in a Laravel application.

Installation

You can install the package using composer

composer require mckenziearts/laravel-notify

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' => [
    ...
    Mckenziearts\Notify\LaravelNotifyServiceProvider::class
    ...
];

You can publish the configuration file and assets by running:

php artisan vendor:publish --provider="Mckenziearts\Notify\LaravelNotifyServiceProvider"

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

composer dump-autoload

Usage

Add styles links with @notifyCss
Add scripts links with @notifyJs
use notify() helper function inside your controller to set a toast notification for info, success, warning or error
Include notify partial to your master layout @include('notify::components.notify')

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Laravel Notify -->
    @notifyCss

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

<body>
    <!-- Laravel Notify -->
    @include('notify::components.notify')
    @notifyJs
</body>

</html>

By way of illustration

Within your controllers, before you perform a redirect call the notify method with a message.

notify()->success(__('Role has been changed.'));

Type of notifications

Let's take a look at the different types of notifications that Laravel Notify can display. There are a total of five types of notifications, each with its unique features and use cases.

First up is the toast notification, which is also the default notification for Laravel Notify. With this type of notification, you can display a message and an optional custom title. To show you what I mean:

notify()->success('Welcome to Laravel Notify ⚡️') or notify()->success('Welcome to Laravel Notify ⚡️', 'My custom title')

The second type of notification is the connectify notification, which is perfect for displaying basic messages with a specified level (e.g., success, warning, error). To show you what I mean:

connectify('success', 'Connection Found', 'Success Message Here')

Next, we have the drakify (😎) notification which displays an alert without any additional message or title. This notification is perfect for drawing the user's attention to a specific event or condition. To show you what I mean:

drakify('success') // for success alert
drakify('error') // for error alert

The fourth type of notification is the smilify notification, which displays a simple custom toast notification using the smiley (😊) emoticon. This notification is perfect for conveying a positive message or a sense of happiness. To show you what I mean:

smilify('success', 'You are successfully reconnected')

Finally, we have the emotify notification, which displays a simple custom toast notification using a vector emoticon. This notification is perfect for conveying a specific emotion or feeling. To show you what I mean:

emotify('success', 'You are awesome, your data was successfully created')

Preset Notifications

The package also allows you to define preset notifications in your config file. This is particularly useful if you have a specific notification that you use frequently across multiple areas of your system. Defining the notification as a preset allows you to maintain it in one place, making it easier to manage.

To use a preset notification in your code, simply call the notify()->preset() method with the name of the preset notification you have defined in your config file. To show you what I mean:

notify()->preset('common-notification')

You can also override any of the preset values that are set in the config file by passing in an array of key-value pairs with the attributes you want to modify. This can be helpful if you need to customize a specific aspect of a preset notification without having to create an entirely new one. To show you what I mean:

notify()->preset('common-notification', ['title' => 'This is the overridden title'])

In this example we are overriding the title of the common-notification preset with a custom title. This approach allows you to quickly and easily modify notifications without having to rewrite the entire notification code block.

Config

The Laravel Notify package provides a configuration file that allows you to customize various aspects of the package's behavior. The configuration file can be found at config/notify.php after you publish the provider element.

One of the cool features that you can configure in the notify.php file is the theme of the notifications. You can activate the dark mode by updating the theme config to 'dark' or by adding a global variable NOTIFY_THEME on your .env file.

'theme' => env('NOTIFY_THEME', 'dark'),

You can define preset notifications in the config file. This is useful if you have notifications that are frequently used across your application. The structure for defining preset notifications is straightforward and follows this example:

'preset-messages' => [
    'user-updated' => [
        'message' => 'The user has been updated successfully.',
        'type'    => 'success',
        'model'   => 'connect',
        'title'   => 'User Updated',
    ],
    'user-deleted' => [
        'message' => 'The user has been deleted successfully.',
        'type'    => 'success',
        'model'   => 'connect',
        'title'   => 'User Deleted',
    ],
],

The example above shows the config for two preset notifications: 'user-updated' and 'user-deleted'.

To wrap things up

Laravel Notify is a powerful package for displaying notifications in your Laravel applications. It offers a variety of notification types and customization options that make it easy to create notifications that fit your specific needs.

If you're looking to display simple toast notifications or more complex custom notifications, Laravel Notify has got you covered. The package also offers the ability to define preset notifications in the configuration file which can save you time and help you maintain consistency throughout your application.

Laravel Notify is a great package that can help you create effective and visually appealing notifications that enhance the user experience of your application. If you haven't already, give Laravel Notify a try and see how it can benefit your application.

Laravel package:

https://github.com/mckenziearts/laravel-notify

❤ Motivation:

🍀Support

Please consider following and supporting us by subscribing to our channel. Your support is greatly appreciated and will help us continue creating content for you to enjoy. Thank you in advance for your support!

YouTube
Discord
GitHub