Notification Message Popup using Toastr JS Plugin in Laravel

Toastr JS is a lightweight JavaScript plugin that allows you to create and display notification messages on your web page. In this article, we'll explore how to use Toastr JS in Laravel to create notification message popups.

Installation

Tostr JS can be installed using npm:

npm install toastr

Next, add the Toastr CSS and JS files to your Laravel project. You can do this by adding the following lines to your app.blade.php file:

<link rel="stylesheet" href="{{ asset('css/toastr.min.css') }}">
<script src="{{ asset('js/toastr.min.js') }}"></script>

Usage

To display a notification message using Toastr JS, you can use the following syntax:

toastr.success('Message', 'Title');

Replace 'Message' with the message you want to display and 'Title' with the title of the message.

Example

Let's create a notification message that displays when a user successfully logs in to our Laravel application.

if (Auth::attempt(['email' => $email, 'password' => $password])) {
    toastr()->success('Welcome back, ' . Auth::user()->name, 'Login Successful');
    return redirect()->intended('dashboard');
}

In this example, we use Laravel's Auth class to attempt to log in the user. If the login attempt is successful, we display a success message using Toastr JS and redirect the user to the dashboard.

Output

The output of this code will be a notification message popup with the message "Welcome back, {username}" and the title "Login Successful."

Explanation

Toastr JS is a simple and effective way to display notification messages on your web page. In this example, we use Toastr JS to display a success message when a user logs in to our Laravel application.

Use

Toastr JS can be used in a variety of scenarios, such as when a user successfully registers, when an email is sent, when an error occurs, etc.

Important Points

• Toastr JS is lightweight and easy to use.
• Toastr messages can be customized with different styling options.
• Toastr messages can be called from any page in your Laravel application

Summary

Toastr JS is a useful plugin for displaying notification messages on your web page. In this article, we explored how to use Toastr JS in Laravel to create notification message popups. By using Toastr JS in your Laravel application, you can easily display success messages, error messages, and other notifications without having to reload the page.