A Livewire 4 modal/bottom-sheet component that supports multiple child modals while maintaining state.
composer require sobitnl/livewire-modal-sheetAdd the Livewire directive to your layout file (typically before </body>):
<html>
<body>
<!-- Your content -->
@livewire('livewire-modal-sheet')
</body>
</html>Add the following to your tailwind.config.js to include the modal styles:
export default {
content: [
'./vendor/sobitnl/livewire-modal-sheet/resources/views/*.blade.php',
// ... your other paths
],
safelist: [
{
pattern: /max-w-(full|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
variants: ['full','sm', 'md', 'lg', 'xl', '2xl']
}
],
}Create a Livewire component that extends ModalComponent:
<?php
namespace App\Livewire;
use SobitNL\LivewireModalSheet\ModalComponent;
class EditUser extends ModalComponent
{
public $user;
public function mount($userId)
{
$this->user = User::findOrFail($userId);
}
public function save()
{
// Save logic...
$this->closeModal();
}
public function render()
{
return view('livewire.edit-user');
}
}You can open a modal by dispatching the openModal event:
<!-- Outside of any Livewire component -->
<button onclick="Livewire.dispatch('openModal', { component: 'edit-user', arguments: { userId: 1 }})">
Edit User
</button>
<!-- Inside a Livewire component -->
<button wire:click="$dispatch('openModal', { component: 'edit-user', arguments: { userId: {{ $user->id }} }})">
Edit User
</button>Parameters are automatically injected into your modal component:
class EditUser extends ModalComponent
{
public User $user; // Automatically resolved from route binding
public function render()
{
return view('livewire.edit-user');
}
}<button wire:click="$dispatch('openModal', { component: 'edit-user', arguments: { user: {{ $user->id }} }})">
Edit User
</button><button wire:click="$dispatch('closeModal')">Cancel</button>public function save()
{
// Save logic...
$this->closeModal();
}public function save()
{
$this->user->save();
$this->closeModalWithEvents([
UserList::class => 'refreshList',
]);
}You can open a modal from within another modal:
<!-- Inside EditUser modal -->
<button wire:click="$dispatch('openModal', { component: 'delete-user', arguments: { user: {{ $user->id }} }})">
Delete User
</button>When closing the child modal, it will return to the parent modal.
$this->forceClose()->closeModal();$this->skipPreviousModal()->closeModal();
// or skip multiple
$this->skipPreviousModals(2)->closeModal();Override these static methods in your modal component:
class EditUser extends ModalComponent
{
// should it behave as a bottomsheet
public static function asBottomSheet(): bool
{
return true; //default is false
}
// Modal width: 'full', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
public static function modalMaxWidth(): string
{
return 'lg';
}
// Close when clicking outside
public static function closeModalOnClickAway(): bool
{
return false;
}
// Close when pressing Escape
public static function closeModalOnEscape(): bool
{
return true;
}
// Destroy component state on close
public static function destroyOnClose(): bool
{
return true;
}
}Publish the config file:
php artisan vendor:publish --tag=livewire-modal-sheet-configPublish the views:
php artisan vendor:publish --tag=livewire-modal-sheet-viewsThere are three classes you can use to style the modal and sheet elements:
-
livewire-modal-sheet
the general modal/ sheet class -
livewire-modal-sheet-bottom
specifically for the bottom sheet -
livewire-modal-sheet-drag-item
the draggable bottom sheet element
MIT License. See LICENSE for more information.