Advanced Usage

Take your notifications to the next level with these advanced features.

Stacking System

Flare features a smart stacking system that prevents your screen from being flooded with notifications.

You can disable stacking in config/flare.php:

'stacking' => false,

Custom Sounds

You can play a sound when a notification appears.

1. Enable sounds in config/flare.php.
2. Configure the paths to your sound files.

'sounds' => [
    'enabled' => true,
    'success' => '/sounds/success.mp3',
    // ...
],

Or play a specific sound for one toast:

Flare::success('Cha-ching!', [
    'sound' => '/sounds/cash-register.mp3'
]);

Browser Events

Flare emits custom browser events that you can listen to in your JavaScript.

flare-toast-show

Dispatched when a toast is triggered.

window.addEventListener("flare-toast-show", (event) => {
    console.log("New toast:", event.detail);
    // event.detail contains: { id, text, type, ... }
});

Custom Icons

You can use your own SVG icons instead of the default ones by passing an SVG string.

Flare::info('Custom Icon', [
    'icon' => '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>'
]);