Checkout demo of the laravel-flash
PHP 8.0, LARAVEL, and Composer are required.
If you Intend to use livewire, make sure it is required LIVEWIRE,
To get the latest version of Laravel Flash, simply require it
composer require hen8y/laravel-flashOr add the following line to the require block of your composer.json file.
"hen8y/laravel-flash": "^2."You'll then need to run composer install or composer update to download it and have the autoloader updated.
Once Laravel Flash is installed, you need to register the service provider. Open up config/app.php and add the following to the providers key.
'providers' => [
...
Hen8y\Flash\FlashServiceProvider::class,
...
]To reload your application run the following command:
composer dump-autoload
You can publish the configuration file and assets by running:
If you're also upgrading from v1.* make sure to delete the public/vendor/hen8y/laravel-flash folder and run this too
php artisan vendor:publish --provider="Hen8y\Flash\LaravelFlashServiceProvider"
The configuration-file flash.php would be published in your config dirctory after running the above command:
<?php
return [
/*
|--------------------------------------------------------------------------
| Timeout
|--------------------------------------------------------------------------
|
| Specifies the duration, in seconds, for which the notification will remain visible.
|
*/
"timeout" => 2000,
/*
|--------------------------------------------------------------------------
| Enable Cancel Button
|--------------------------------------------------------------------------
|
| Enable the close notification button
|
|
*/
"enable_cancel_btn" => true,
/*
|--------------------------------------------------------------------------
| Cancel Button Type
|--------------------------------------------------------------------------
|
| Choose if the flash notification should be svg or text.
|
*/
"cancel_btn_type" => "svg",
/**
* If text is chosen as btn_type, enter the text to be chosen below or
* leave default
*
*/
"btn_text" => "close",
/*
|--------------------------------------------------------------------------
| Flash Theme Colors
|--------------------------------------------------------------------------
|
| Specify the theme colors you want for your flash notification.
| If dark mode if enabled this would be used as light mode theme
|
| MUST BE HEX.
|
*/
"theme" => [
"info" => "#232113",
"success" => "#166534",
"error" => "#b91c1c",
],
/*
|--------------------------------------------------------------------------
| Enable Dark Mode
|--------------------------------------------------------------------------
|
| Set dark mode to true and specify the colors you want for your dark mode.
|
| MUST BE HEX.
|
*/
"enable_dark_mode" => false,
"dark-theme" => [
"info" => "#232113",
"success" => "#22c55e",
"error" => "#b91c1c",
]
];
You can define the timeout, flash theme colors for your flash notification in the config file
- Include the flash component to your main layout immediately after your body tag
<x-flash::flash /> - Add
@flashCssin your main layout before all css files.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
@flashCss
{{-- Your Css here --}}
</head>
<body class="antialiased">
<x-flash::flash />
<div>
<!-- Your content -->
</div>
</body>
</html>
To display a flash message, you call the flash method. it accepts 2 parameter
- Type ( There 3 types of notifications:
Info,success,error) - Message.
The flash type must always be lower case
Route::get('/test', function () {
flash('info', 'This is an info message');
return redirect('/');
});Using livewire volt
<?php
use Livewire\Volt\Component;
new class extends Component
{
public function refresh()
{
flash("info", "This is an info message");
$this->redirectRoute("home", navigate: true);
}
};
?>Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.
Don't forget to follow me on twitter!
Thanks! Ogbonna Henry (hen8y).
The MIT License (MIT). Please see License File for more information.