Code of RelevancyLife 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 forinfo,success,warningorerror - 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!
