README

Simple Livewire 3 toast messages package

Compatible with any css framework & no CDN requirements. (Uses native inline css styling & svg icons.)

Installation

Install via composer:

  composer require mrjokermr/dynamic-toasts

Place the Livewire component right before the closing body tag in your layout (for example in resources/views/layouts/app.blade.php)

@livewire('dynamic-toasts')
</body>

Usage/Examples

use Mrjokermr\DynamicToasts\Classes\ToastMessage;
use Mrjokermr\DynamicToasts\Enums\ToastMessageType;
use Mrjokermr\DynamicToasts\Livewire\DisplayDynamicToasts;

$this->dispatch(
    DisplayDynamicToasts::NEW_TOAST_EVENT,
    ToastMessage::make(
        message: "Hello GitHub",
        type: ToastMessageType::INFO
    ),
);

//or use session->flash() when wanting to display a toast message after redirecting
session()->flash(
    DisplayDynamicToasts::FLASH_TOAST_EVENT,
    ToastMessage::make(
        message: __('toasts.scheduled', ['name' => __('shared.visit')]),
        type: ToastMessageType::POSITIVE
    )
);

Available types:

use Mrjokermr\DynamicToasts\Enums\ToastMessageType;

ToastMessageType::INFO
ToastMessageType::SUCCESS
ToastMessageType::POSITIVE
ToastMessageType::NEGATIVE
ToastMessageType::FAILURE
ToastMessageType::WARNING

Customization:

Without icon:

Add the ->hideIcon() function.

Example:

$this->dispatch(
    DisplayDynamicToasts::NEW_TOAST_EVENT,
    ToastMessage::make(
        message: "Hello GitHub",
        type: ToastMessageType::INFO
    )->hideIcon(),
);

Set expiration time:

Add the ->setExpiresAtSeconds() function.

Example:

$this->dispatch(
    DisplayDynamicToasts::NEW_TOAST_EVENT,
    ToastMessage::make(
        message: "Hello GitHub",
        type: ToastMessageType::INFO
    )->setExpiresAtSeconds(seconds: 12),
);

Config

php artisan vendor:publish --tag=dynamic-toasts-config

You might change the background color and text color for each individual pop up type, or the default toast duration. default config:

return [
    'default_seconds' => 5,
    'default_value_show_icon' => true,

    'styles' => [
        'positive' => [
            'background-color' => '#00c950',
            'text-color' => '#fcfcfc',
            'class' => null,
        ],
        'success' => [
            'background-color' => '#00c950',
            'text-color' => '#fcfcfc',
            'class' => null,
        ],
        'negative' => [
            'background-color' => '#fb2c36',
            'text-color' => '#fcfcfc',
            'class' => null,
        ],
        'failure' => [
            'background-color' => '#fb2c36',
            'text-color' => '#fcfcfc',
            'class' => null,
        ],
        'warning' => [
            'background-color' => '#fe9a00',
            'text-color' => '#fcfcfc',
            'class' => null,
        ],
        'info' => [
            'background-color' => '#fe9a00',
            'text-color' => '#fcfcfc',
            'class' => null,
        ],
    ],
];