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..
];

🧩 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

🎯 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