Getting Started

Start by installing the package via Composer and publishing assets:

composer require devrabiul/laravel-toaster-magic
php artisan vendor:publish --provider="Devrabiul\ToastMagic\ToastMagicServiceProvider"

Next, include the required CSS/JS in your main Blade layout:

<!-- In <head> -->
{!! ToastMagic::styles() !!}

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

Your first toast is simple—add it directly in a controller method:

ToastMagic::success('Welcome back!', 'Your profile has been updated.');
return back();

Implementation Patterns

Use the fluent API for complex notifications:

ToastMagic::dispatch()
    ->error('Connection Failed', 'Please check your internet connection.', [
        'showCloseBtn' => true,
        'customBtnText' => 'Retry',
        'customBtnLink' => route('retry'),
    ]);

In Livewire v3/v4 components, leverage native event dispatching:

$this->dispatch('toastMagic', 
    status: 'info', 
    title: 'Changes Saved',
    message: 'All updates have been persisted.'
);

For single-page feel or AJAX workflows, trigger toasts client-side with vanilla JS:

const tm = new ToastMagic();
tm.success('Draft Saved', 'Your changes were auto-saved.');

Configure theming globally in config/laravel-toaster-magic.php:

'options' => [
    'theme' => 'glassmorphism', // e.g., 'ios', 'neon'
    'color_mode' => true,       // Strong semantic coloring
    'gradient_enable' => true,  // Subtle background gradients
],
'livewire_enabled' => true,
'livewire_version' => 'v4',

Gotchas and Tips

CSS scoping matters: Themes are scoped via .theme-* classes — avoid naming collisions with custom CSS by increasing specificity or using utility classes.
Livewire SPA mode caveat: If using wire:navigate, ensure ToastMagic::scripts() renders after Livewire’s JS to avoid timing issues.
Positioning flexibility: Toasts default to top-right (toast-top-end). Override via config or runtime position option in arrays:
```
ToastMagic::warning('Low disk space', 'Only 5% remaining.', ['position' => 'toast-bottom-start']);
```
Dark mode isn’t automatic: Add theme="dark" on <body> manually (not handled by JS), e.g., <body class="@if(config('app.debug')) theme="dark" @endif">.
Styling overrides: Prefer CSS variables (e.g., --toast-success-bg: #00a65a) for runtime theme customization over overriding CSS classes directly.
Browser compatibility: All CSS uses modern features like backdrop-filter — the ios and glassmorphism themes may fall back gracefully on older browsers without blur support.
No jQuery/Tailwind dependency: Perfect for existing apps using Bootstrap or custom CSS, but if using Tailwind, avoid class conflicts by using unique toast container IDs (configurable).

Laravel Toaster Magic Laravel Package

Getting Started

Implementation Patterns

Gotchas and Tips