maryUI

Toast

Usage

Place toast tag anywhere on the main layout. 

<body>
    ...
    <x-toast />  
</body>

Import the Toast trait and call the $this->toast(...) method. 

use Mary\Traits\Toast;
 
class MyComponent extends Component
{
    // Use this trait 
    use Toast;
 
    public function save()
    {
        // Do your stuff here ...
 
        // Toast
        $this->toast(
            type: 'success',
            title: 'It is done!',
            description: null,                  // optional (text)
            position: 'toast-top toast-end',    // optional (daisyUI classes)
            icon: 'o-information-circle',       // Optional (any icon)
            css: 'alert-info',                  // Optional (daisyUI classes)
            timeout: 3000,                      // optional (ms)
            redirectTo: null                    // optional (uri)
        );
 
        // Shortcuts
        $this->success(...);
        $this->error(...);
        $this->warning(...);
        $this->info(...);
    }
}

For convenience this component flashes the following messages to make testing easier. 

session()->flash('mary.toast.title', $title);
session()->flash('mary.toast.description', $description);

Example

The shortcuts are branded with default colors and icons. 

<x-button label="Default" class="btn-success" wire:click="save" spinner />
 
<x-button label="Quick" class="btn-error" wire:click="save2" spinner />
 
<x-button label="Save and redirect" class="btn-warning" wire:click="save3" spinner />
public function save()
{
    // Your stuff here ...
 
    // Toast
    $this->success('We are done, check it out');
}
 
public function save2()
{
    // Your stuff here ...
 
    // Toast
    $this->error(
        'It will last just 1 second ...',
        timeout: 1000,
        position: 'toast-bottom toast-start'
    );
}
 
public function save3()
{
    // Your stuff here ...
 
    // Toast
    $this->warning(
        'It is working with redirect',
        'You were redirected to another url ...',
        redirectTo: '/docs/components/form'
    );
}

Default position

The default position is toast-top toast-end. You can change it by passing the position parameter. 

<body>
    ...
    <x-toast position="toast-top toast-center" />
</body>

Custom style

You can use any daisyUI/Tailwind classes. It also supports HTML. 

<x-button label="Like" wire:click="save4" icon="o-heart" spinner />
public function save4()
{
    // Your stuff here ...
 
    // Toast
    $this->warning(
        'Wishlist <u>updated</u>',
        'You will <strong>love it :)</strong>',
        position: 'bottom-end',
        icon: 'o-heart',
        css: 'bg-pink-500 text-base-100'
    );
}

Using an Exception

The previous approach uses a Trait and works only inside Livewire components. If you are trying to trigger a toast from outside a Livewire context, you can use the ToastException to do so. This class has a number of shortcut functions to make it easier to use, and it's possible to overwrite all defaults. 

use Mary\Exceptions\ToastException;
 
public function notALivewireMethod()
{
    throw ToastException::error('Your operation could not complete');
 
    // Shortcuts with the same API from Toast trait
    throw ToastException::success(...);
    throw ToastException::error(...);
    throw ToastException::warning(...);
    throw ToastException::info(...);
}

The livewire request hook fail method is used to handle the client side rendering of the toasts. If you already have hooks set up, the hook to render the toast will be called second. If you have a toast call in your existing hook, it will be de-bounced so only one call is used. The livewire fail hook is given a preventDefault() function to call if you wish to stop the event bubbling up, this behaviour is respected by the second hook configured by toast. If you want to disable this call, you can chain the permitDefault() method on your exception. 

use Mary\Exceptions\ToastException;
 
public function notALivewireMethod()
{
    throw ToastException::info('Do not prevent default on client side')->permitDefault();
}
maryUI
Sponsor