mrjokermr / dynamic-toasts
Dynamic toasts for livewire
Installs: 75
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 0
Forks: 0
Open Issues: 0
pkg:composer/mrjokermr/dynamic-toasts
Requires
- php: ^8.1
- livewire/livewire: ^3.0
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, ], ], ];