devsrv / livewire-modal
turn laravel livewire component into modal
Requires
- php: ^7.3|^8.0
- illuminate/view: ^7.0|^8.0|^9.0
- livewire/livewire: ^2.0
Requires (Dev)
- phpunit/phpunit: ^9.3
README
Turn Laravel Livewire Component into Modal.
🏷 Features
- Modal triggered by javascript i.e. opens instantly without waiting for livewire network round trip to finish ( no laggy feeling )
- Skeleton loading indicator
- Support alert message ( info, warning, success, danger )
- Trigger from Alpine Component / Vanilla JS / Livewire Class Component
🧾 Requirements
Bootstrap | 4 or 5 | no bootstrap support coming soon |
---|---|---|
Jquery | for bootstrap 4 only | |
Laravel | >= 7 | |
Livewire | >= 2.0 | |
Alpine JS |
📥 Installation
composer require devsrv/livewire-modal
Include the base modal component
<html> <head> ... @livewireStyles <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script> </head> <body> ... <x-livewiremodal-base /> 👈 @livewireScripts </body> </html>
Publish assets
php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=public
Publish config
php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=config
config support bootstrap theme: bs4 | bs5
📌 Updating
Important: when updating the package make sure to re-publish the assets with
--force
flag
php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=public --force
⚗️ Usage
Create Livewire Component
No consideration required, create livewire component as usual. Use livewire's mount
to handle passed parameters
✨ Open Modal
✔️ From Alpine Component
<div x-data> <button type="button" x-on:click='$dispatch("open-x-modal", { title: "Heading Title", modal: "livewire-component-name", size: "xl", args: {{ json_encode($data_array) }} })'>open </button> </div>
✔️ Via Vanilla JS
<button type="button" onclick='_openModal("Heading", "component-name", {{ json_encode($data) }}, "sm")'> open </button>
✔️ Via Trigger Blade Component
<x-livewiremodal-trigger class="btn" title="Modal Heading" modal="component-name" :args="['sky' => 'blue', 'moon' => 1]" lg>open </x-livewiremodal-trigger>
✔️ From Livewire Class
$this->dispatchBrowserEvent('open-x-modal', ['title' => 'My Modal', 'modal' => 'product.order', 'args' => ['id' => 1, 'rate' => 20]]);
💡 Modal size supports
sm
lg
xl
// completely optional
🌈 Bonus
you are free to put content in livewire view file in any structure, however the package provides an blade component for bootstrap modal which you can use as:
<x-livewiremodal-modal> <div class="row"> ... </div> ... <x-slot name="footer"> ... <button type="button" class="..">Save</button> </x-slot> </x-livewiremodal-modal>
✌🏼 Two reasons to use this component
🟢 a pretty line progress loading indicator which appears in the top when livewire loading state changes
🟢 alert notification message which can be triggered by:
$this->info('<strong>Hi !</strong>, i am an alert'); // support `info` `warning` `success` `danger`
Changelog
Please see CHANGELOG for more information on what has changed recently.
License
The MIT License (MIT). Please see License File for more information.
👋🏼 Say Hi!
Leave a ⭐ if you find this package useful 👍🏼, don't forget to let me know in Twitter