Getting Started

Minimal Setup

Installation

composer require thbappy7706/laravel-toastify

Publish the config file:

php artisan vendor:publish --provider="Thbappy7706\Toastify\ToastifyServiceProvider"

Include the CSS/JS Add to your main layout file (e.g., resources/views/layouts/app.blade.php):
```
@toastifyStyles
@toastifyScripts
```

First Toast Trigger a toast in a controller or Blade view:

use Thbappy7706\Toastify\Facades\Toastify;

Toastify::success('This is a success message!');

Or in Blade:

@toastify('This is a default toast.')

First Use Case: Livewire Component

For Livewire v3/v4, use the Toastify facade in your component:

use Thbappy7706\Toastify\Facades\Toastify;

public function mount() {
    Toastify::info('Component mounted successfully!');
}

Implementation Patterns

Core Workflows

1. Blade Integration

Direct Usage:
```
@toastify('Operation completed', 'success', ['position' => 'top-right'])
```
- Parameters: (message, type, options)
- Types: success, error, warning, info, default

Dynamic Messages:

@php
    $user = Auth::user();
    $message = "Welcome back, {$user->name}!";
@endphp
@toastify($message, 'info')

2. Livewire Integration

Component-Level Toasts:

public function save() {
    try {
        // Save logic
        Toastify::success('Data saved successfully!');
    } catch (\Exception $e) {
        Toastify::error('Failed to save: ' . $e->getMessage());
    }
}

Global Toasts via Events:

use Thbappy7706\Toastify\Events\ToastEvent;

event(new ToastEvent('Custom event toast', 'warning'));

Listen in a Livewire component:

protected $listeners = ['toast' => 'handleToast'];

public function handleToast($message, $type) {
    Toastify::custom($message, $type);
}

3. Customizing Toasts

Options Object:

Toastify::custom('Custom toast', 'default', [
    'position' => 'bottom-center',
    'autoClose' => 5000,
    'progressBar' => true,
    'animation' => 'slide',
    'theme' => 'dark',
]);

Theme Switching: Update config/toastify.php:

'theme' => 'colored', // Options: 'light', 'dark', 'colored'

4. Queueing Toasts

Batch Processing:

Toastify::queue([
    ['message' => 'Step 1', 'type' => 'info'],
    ['message' => 'Step 2', 'type' => 'warning'],
    ['message' => 'Done!', 'type' => 'success'],
]);

Integration Tips

Livewire + Alpine.js: Combine with Alpine.js for dynamic triggers:

<button x-on:click="Toastify.success('Alpine triggered toast!')">
    Show Toast
</button>

Form Validation:

public function validateRequest() {
    $validator = Validator::make(...);
    if ($validator->fails()) {
        foreach ($validator->errors()->all() as $error) {
            Toastify::error($error);
        }
    }
}

API Response Handling:

$response = Http::post(...);
if ($response->successful()) {
    Toastify::success('API call succeeded!');
} else {
    Toastify::error('API call failed: ' . $response->body());
}

Localization: Use Laravel's translation system:

Toastify::info(__('toastify.welcome'));

Define in resources/lang/en/toastify.php:

return [
    'welcome' => 'Welcome to our platform!',
];

Gotchas and Tips

Pitfalls

Livewire Component Initialization:
- Issue: Toasts may not appear if triggered before Livewire's mount().
- Fix: Use created() hook or delay the toast:
```
public function created() {
    $this->dispatch('toast', ['message' => 'Ready!', 'type' => 'info']);
}
```
CSS/JS Loading Order:
- Issue: Toasts may not render if @toastifyStyles/@toastifyScripts are placed after the closing </body> tag.
- Fix: Include them in <head> or just before </body>.
Conflicting Animations:
- Issue: Custom animations may conflict with default styles.
- Fix: Override in your CSS:
```
.Toastify__bounce-enter-active {
    animation: custom-bounce 0.5s;
}
```
Auto-close Delays:
- Issue: autoClose may not work if the toast is dismissed manually.
- Fix: Ensure no conflicting JavaScript is clearing the timeout.
Livewire Hydration:
- Issue: Toasts may flicker during Livewire hydration.
- Fix: Use wire:ignore on the toast container or delay rendering:
```
<div wire:ignore x-data="{ showToast: false }">
    
</div>
```

Debugging

Console Errors:
- Check browser console for missing dependencies or typos in options.
Toast Not Showing:
- Verify @toastifyScripts is loaded.
- Ensure no JavaScript errors block execution.
Positioning Issues:
- Inspect the toast container in DevTools to check for overflow or z-index conflicts.
Livewire-Specific:
- Use wire:ignore on the toast container if Livewire is re-rendering it unexpectedly.

Tips

Reusable Toast Helpers: Create a helper class:

// app/Helpers/ToastHelper.php
class ToastHelper {
    public static function apiSuccess($message) {
        Toastify::success($message, [
            'position' => 'top-right',
            'autoClose' => 3000,
        ]);
    }
}

Dark Mode Support: Dynamically switch themes based on user preference:

$theme = session('theme') === 'dark' ? 'dark' : 'light';
Toastify::custom('Message', 'info', ['theme' => $theme]);

Progress Bar Customization: Override the progress bar in CSS:

.Toastify__progress-bar {
    background: linear-gradient(to right, #4CAF50, #8BC34A);
}

RTL Support: Ensure your layout has dir="rtl" and test toast positioning.

Performance: For high-frequency toasts (e.g., logging), batch them:

Toastify::queue(array_map(fn($log) => ['message' => $log, 'type' => 'info'], $logs));

Testing: Use Laravel's HTTP tests to verify toasts:

$response = $this->post('/endpoint');
$response->assertSee('data-testid="toastify-toast"');

Custom Icons: Extend the package by adding custom icons via config:

'icons' => [
    'success' => '✅',
    'error' => '❌',
    'custom' => '🔧',
],

Then use:

Toastify::custom('Custom icon', 'custom');

Accessibility: Ensure toasts are ARIA-compliant by adding roles/attributes:

@toastify('Accessible toast', 'info', [
    'aria-live' => 'polite',
    'aria-atomic' => 'true',
])

Laravel Toastify Laravel Package