README

Laravel Toaster Magic is a lightweight and flexible toast notification package for Laravel applications — built with zero dependencies on jQuery, Bootstrap, or Tailwind. It’s fully compatible with Livewire, supports custom events, and now features a Material-inspired design for a modern UX out of the box.

🚀 Live Demo

👉 Check out the live demo

✨ Features

🔥 Easy-to-Use – Simple and intuitive toast notifications for Laravel.
🌍 RTL Support – Full compatibility with right-to-left (RTL) languages.
🌙 Dark Mode – Seamless dark mode integration.
🎨 Customizable – Tailor toasts with various styles, buttons, and positions.
⚡ Livewire v3 Ready – Fully supports Livewire v3 with event-based dispatching.

📦 Installation

Install the package via Composer:

composer require devrabiul/laravel-toaster-magic

Then publish the package assets:

php artisan vendor:publish --provider="Devrabiul\ToastMagic\ToastMagicServiceProvider"

⚙️ Usage

1. Basic Setup

Include the necessary assets in your layout Blade template:

In the <head> section:

{!! ToastMagic::styles() !!}

Before the closing </body> tag:

{!! ToastMagic::scripts() !!}

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page</title>

    {!! ToastMagic::styles() !!}
</head>
<body>

    <!-- Your Content -->

    {!! ToastMagic::scripts() !!}
</body>
</html>

2. Usage in Controller

Trigger toast notifications from your controllers using the ToastMagic facade:

use Devrabiul\ToastMagic\Facades\ToastMagic;

public function store()
{
    // Your logic
    ToastMagic::success('Successfully Created');
    
    // Another Way - message and description
    ToastMagic::success("Success!", "Your data has been saved!");
    
    // Another Way - message and description
    ToastMagic::success("Success!", "Your data has been saved!", [
        'showCloseBtn' => true,
        'customBtnText' => 'Link Text',
        'customBtnLink' => 'https:/demo.com',
    ]);
    return back();
}

3. Usage in JavaScript (Optional)

Use ToastMagic directly in JavaScript (for AJAX responses, etc.):

const toastMagic = new ToastMagic();

// Basic notifications
toastMagic.success("Success!", "Your data has been saved!");
toastMagic.error("Error!", "Something went wrong.");
toastMagic.warning("Warning!", "Check your input.", true);
toastMagic.info("Info!", "Click for details.", false, "Learn More", "https://example.com");

4. ✅ Livewire v3 Support

Enable Livewire support by updating your config file:

// config/laravel-toaster-magic.php

return [
    'options' => [
        // your toast options...
    ],
    'livewire_enabled' => true,
    'livewire_version' => 'v3',
];

Set 'livewire_enabled' => true to activate Livewire integration.
Set 'livewire_version' => 'v3' to specify the Livewire version.

Dispatch toast notifications from Livewire components:

$this->dispatch('toastMagic',
    status: 'success',
    title: 'User Created',
    message: 'The user has been successfully created.',
    options: [
        'showCloseBtn' => true,
        'customBtnText' => 'Link Text',
        'customBtnLink' => 'https:/demo.com',
    ],
);

$this->dispatch('toastMagic',
    status: 'info',
    title: 'User Created 2',
    message: 'The user has been successfully created.'
);

Supported status types: success, info, warning, error

5. ✅ Themes

Change Theme by updating your config file:

// config/laravel-toaster-magic.php

return [
    'options' => [
        // your toast options..
        "theme" => "material", // "default, material".
    ],
    // your toast options..
];

6. 🎨 Enabling Color Mode

ToastMagic supports a color mode that dynamically applies toast colors based on the toast type (success, error, warning, info). This makes your notifications visually consistent and meaningful without manually specifying colors or themes.

Enable color mode in your configuration file config/laravel-toaster-magic.php:

return [
    'options' => [
        // other options...
        'color_mode' => true, // Automatically apply colors based on toast type
    ],
    'livewire_enabled' => false,
    'livewire_version' => 'v3',
];

🧩 Alternative Syntax & Fluent API

ToastMagic provides both simple and advanced APIs to suit your style.

🔹 Static Method (Quick)

use Devrabiul\ToastMagic\Facades\ToastMagic;

ToastMagic::success('Operation Successful');
ToastMagic::error('Something went wrong');

🔹 Fluent Syntax (Advanced)

ToastMagic::dispatch()->success(
    'User Created',
    'The user has been successfully created.',
    [
        'showCloseBtn'    => true,
        'customBtnText'   => 'View Profile',
        'customBtnLink'   => 'https://demo.com',
    ]
);

📍 Toast Position Options

Customize toast display position using any of the following:

Position	Description
`toast-top-start`	Top left corner
`toast-top-end`	Top right corner (default)
`toast-top-center`	Top center
`toast-bottom-start`	Bottom left corner
`toast-bottom-end`	Bottom right corner
`toast-bottom-center`	Bottom center

🌙 Enable Dark Mode

Add theme="dark" to your <body> tag to automatically enable dark mode.

<body theme="dark">

🎯 Get Started Today!

Experience the magic of ToastMagic and enrich your Laravel application with modern, elegant toast notifications.

🔗 GitHub: devrabiul/laravel-toaster-magic
🔗 Live Demo: laravel-toaster-magic.rixetbd.com
🔗 Packagist: packagist.org/packages/devrabiul/laravel-toaster-magic

🤝 Contributing

We welcome contributions! Please fork the repository, make your changes, and submit a pull request. For feature requests or issues, open a GitHub issue.

📄 License

This package is open-source software licensed under the MIT license.

🌱 Treeware

This package is Treeware. If you use it in production, then we ask that you buy the world a tree to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.

📬 Contact

For support or inquiries, feel free to reach out: 📧 devrabiul@gmail.com

devrabiul / laravel-toaster-magic

Maintainers

Details