Take your notifications to the next level with Laravel Notify
Tags: programming, laravel, html, css
Published: 2023-05-08 13:05:06

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

```bash
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.

```php
'providers' => [
    ...
    Mckenziearts\Notify\LaravelNotifyServiceProvider::class
    ...
];
```

You can publish the configuration file and assets by running:

```bash
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:

```bash
composer dump-autoload
```

---

## **Usage**

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


```php
<!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.

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

![By way of illustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35su8cpjfoo6t6fb39s6.png)

---

## **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:

```php
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:

```php
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:

```php
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:

```php
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:

```php
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:

```php
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:


```php
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.

```php
'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:

```php
'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:**

![Motivation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xcpb1mghtgwrpxga5rj6.png)

---

## **🍀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](https://youtube.com/@codeofrelevancy)
[Discord](https://discord.com/invite/f8jwnzcRz2)
[GitHub](https://github.com/codeofrelevancy)

![Dour Darcel #8740](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwy152om6yjrgpr4dbde.png)