thbappy7706/laravel-toastify

A beautiful, customizable toast notification package for Laravel Blade and Livewire v3/v4 with bouncing animations inspired by react-toastify

laravel notifications alerts flash-messages laravel-notifications toast livewire toast-notifications livewire-v4 toastify bounce-animation livewire-v3

Install
`composer require thbappy7706/laravel-toastify`
Latest Version:	v1.1.3
PHP:	^8.1\|^8.2\|^8.3\|^8.4

Maintainer: thbappy

Laravel Toastify

A feature-rich, customizable toast notification package for Laravel Blade and Livewire v3/v4, inspired by react-toastify. Includes beautiful bouncing animations and extensive customization options.

🚀 Live Demo

👉 View Live Demo

Features

✨ Multiple Animations: Bounce (default), Slide, Zoom, Flip
🎯 Flexible Positioning: 6 positions (top-left, top-right, top-center, bottom-left, bottom-right, bottom-center)
🎨 Toast Types: Success, Error, Warning, Info, Default
⏱️ Auto-close: Customizable duration or disable
📊 Progress Bar: Visual countdown timer
🖱️ Drag to Dismiss: Swipe or drag toasts away
⏸️ Pause on Hover: Auto-pause timer when hovering
🌙 Multiple Themes: Light, Dark, Colored
🌍 RTL Support: Right-to-left text direction
📱 Responsive: Mobile-friendly
⚡ Livewire v3/v4 Compatible: Real-time updates 🎭 Stackable: Multiple toasts display beautifully

Requirements

PHP 8.1+
Laravel 10.x, 11.x, or 12.x
Livewire 3.x or 4.x

Installation

Install via Composer:

composer require thbappy7706/laravel-toastify

Publish the config, views, and assets:

php artisan vendor:publish --tag=toastify-config
php artisan vendor:publish --tag=toastify-views
php artisan vendor:publish --tag=toastify-assets

Setup

For Livewire Applications

Add the Livewire component to your layout file (usually resources/views/layouts/app.blade.php):

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Your head content -->
    @stack('styles')
</head>
<body>
    {{ $slot }}
    
    <!-- Add Toastify Container -->
    <livewire:toastify-container />
    
    @stack('scripts')
</body>
</html>

For Traditional Blade Applications

Use the Blade directive in your layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Your head content -->
    @stack('styles')
</head>
<body>
    @yield('content')
    
    <!-- Add Toastify Container -->
    @toastify
    
    @stack('scripts')
</body>
</html>

Usage

Basic Usage

In Controllers (Redirects)

use Toastify\Laravel\Facades\Toastify;

public function store(Request $request)
{
    // Your logic here
    
    Toastify::success('User created successfully!');
    
    return redirect()->route('users.index');
}

// Other types
Toastify::error('Something went wrong!');
Toastify::warning('Please check your input!');
Toastify::info('New update available!');
Toastify::default('This is a toast message');

In Livewire Components

use Toastify\Laravel\Facades\Toastify;

class UserForm extends Component
{
    public function save()
    {
        // Your logic here
        
        $this->dispatch('toast:add', toast: [
            'type' => 'success',
            'message' => 'Data saved successfully!'
        ]);
    }
}

In JavaScript (Frontend)

// Success toast
window.toastify.success('Operation successful!');

// Error toast
window.toastify.error('Operation failed!');

// Warning toast
window.toastify.warning('Please be careful!');

// Info toast
window.toastify.info('Did you know?');

// Default toast
window.toastify.default('Hello World!');

Advanced Usage

Custom Options

Toastify::success('Custom toast!', [
    'autoClose' => 3000,           // Auto close after 3 seconds
    'position' => 'bottom-right',   // Position
    'transition' => 'slide',        // Animation type
    'hideProgressBar' => false,     // Show progress bar
    'pauseOnHover' => true,         // Pause on hover
    'draggable' => true,            // Enable drag to dismiss
    'closeButton' => true,          // Show close button
    'rtl' => false,                 // Right-to-left
]);

Available Options

Option	Type	Default	Description
`autoClose`	int/false	5000	Auto close duration in ms (false to disable)
`position`	string	'top-right'	Position of toast
`transition`	string	'bounce'	Animation type (bounce, slide, zoom, flip)
`hideProgressBar`	bool	false	Hide the progress bar
`closeButton`	bool	true	Show close button
`pauseOnHover`	bool	true	Pause timer on hover
`pauseOnFocusLoss`	bool	true	Pause when window loses focus
`draggable`	bool	true	Enable drag to dismiss
`draggablePercent`	int	80	Percentage of width to dismiss
`rtl`	bool	false	Right-to-left direction

Available Positions

top-left
top-center
top-right
bottom-left
bottom-center
bottom-right

Available Transitions

bounce - Bouncing effect (default)
slide - Sliding effect
zoom - Zoom in/out effect
flip - Flipping effect

Available Toast Types

success - Green toast with checkmark icon
error - Red toast with error icon
warning - Yellow toast with warning icon
info - Blue toast with info icon
default - White toast without icon

Container Customization

You can customize the container globally:

<livewire:toastify-container 
    position="top-right" 
    transition="bounce"
    :newestOnTop="true"
    :rtl="false"
/>

Programmatic Control

Remove Specific Toast

// From JavaScript
window.Livewire.dispatch('toast:remove', { id: 'toast_id_here' });

Clear All Toasts

// From JavaScript
window.Livewire.dispatch('toast:clear');

// From PHP
Toastify::clear();

Configuration

The configuration file is located at config/toastify.php:

return [
    'position' => env('TOASTIFY_POSITION', 'top-right'),
    'transition' => env('TOASTIFY_TRANSITION', 'bounce'),
    'autoClose' => env('TOASTIFY_AUTO_CLOSE', 5000),
    'hideProgressBar' => env('TOASTIFY_HIDE_PROGRESS_BAR', false),
    'closeButton' => env('TOASTIFY_CLOSE_BUTTON', true),
    'pauseOnHover' => env('TOASTIFY_PAUSE_ON_HOVER', true),
    'pauseOnFocusLoss' => env('TOASTIFY_PAUSE_ON_FOCUS_LOSS', true),
    'draggable' => env('TOASTIFY_DRAGGABLE', true),
    'draggablePercent' => env('TOASTIFY_DRAGGABLE_PERCENT', 80),
    'rtl' => env('TOASTIFY_RTL', false),
    'newestOnTop' => env('TOASTIFY_NEWEST_ON_TOP', true),
    'theme' => env('TOASTIFY_THEME', 'light'),
];

Environment Variables

You can set defaults in your .env file:

TOASTIFY_POSITION=top-right
TOASTIFY_TRANSITION=bounce
TOASTIFY_AUTO_CLOSE=5000
TOASTIFY_THEME=light
TOASTIFY_DRAGGABLE=true

Styling & Theming

Themes

Available themes:

light - Light background (default)
dark - Dark background
colored - Background matches toast type color

Change theme in config:

'theme' => 'dark',

Custom Styling

You can customize the CSS by editing the published CSS file at public/vendor/toastify/css/toastify.css or by overriding CSS variables:

:root {
    --toastify-color-success: #10b981;
    --toastify-color-error: #ef4444;
    --toastify-color-warning: #f59e0b;
    --toastify-color-info: #3b82f6;
    --toastify-toast-width: 350px;
    --toastify-z-index: 9999;
}

Examples

Success Notification

Toastify::success('Profile updated successfully!');

Error with Custom Duration

Toastify::error('Failed to save data!', [
    'autoClose' => 8000, // 8 seconds
]);

Warning at Bottom

Toastify::warning('Your session will expire soon!', [
    'position' => 'bottom-center',
    'autoClose' => false, // Don't auto close
]);

Info with Slide Animation

Toastify::info('Check out our new features!', [
    'transition' => 'slide',
    'position' => 'top-left',
]);

Multiple Toasts

Toastify::success('Item 1 added!');
Toastify::success('Item 2 added!');
Toastify::info('Cart updated!');

RTL Support

Toastify::success('تم الحفظ بنجاح!', [
    'rtl' => true,
]);

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
Mobile browsers (iOS Safari, Chrome Mobile)

Credits

Inspired by react-toastify by Fadi Khadra.

License

The MIT License (MIT). Please see License File for more information.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.