mrjokermr/dynamic-modal-wrapper

Scaffholding for laravel & livewire modals

Maintainers

Details

github.com/mrjokermr/dynamic-modal-wrapper

Source

Issues

Installs: 49

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 0

Forks: 0

Open Issues: 0

pkg:composer/mrjokermr/dynamic-modal-wrapper

v1.0.4 2025-11-18 13:04 UTC

Requires

MIT b98db414153b937f13bd19ee88be611e076f86e9

  • Melle R.

This package is auto-updated.

Last update: 2025-12-19 11:08:12 UTC

README

A lightweight package that brings simple, dynamic modal handling to Livewire 3. It provides a clean way to open and close modals from anywhere in your application without boilerplate logic, while keeping configuration and customization flexible.

With DynamicModalWrapper you can:

  • Dispatch modals dynamically from your Livewire components.
  • Pass parameters to modal components at runtime.
  • Hook into modal lifecycle events (OPEN_EVENT, CLOSING_EVENT, CLOSE_EVENT).
  • Customize modal appearance (background colors, padding, z-index, press escape-to-close) via a publishable config.

Installation

Install via composer:

  composer require mrjokermr/dynamic-modal-wrapper

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

<body>
@livewire('dynamic-modal-wrapper')

Usage/Examples

use Mrjokermr\DynamicModalWrapper\Dtos\OpenModalDto;
use Mrjokermr\DynamicModalWrapper\Livewire\DynamicModalWrapper;

$this->dispatch(
    DynamicModalWrapper::OPEN_EVENT,
    new OpenModalDto(
        livewireClass: CreateProductModal::class,
    )
);

Passing data to the mount function:

use Mrjokermr\DynamicModalWrapper\Dtos\OpenModalDto;
use Mrjokermr\DynamicModalWrapper\Livewire\DynamicModalWrapper;

$this->dispatch(
    DynamicModalWrapper::OPEN_EVENT,
    new OpenModalDto(
        livewireClass: CreateProductModal::class,
        params: ['id' => 12]
    )
);

You might want to set the OpenModalDto name since this name will be sent with the phpDynamicModalWrapper::CLOSING_EVENT event for implementing custom logic before the livewire component will be broken down. example

use Mrjokermr\DynamicModalWrapper\Dtos\OpenModalDto;
use Mrjokermr\DynamicModalWrapper\Livewire\DynamicModalWrapper;

function open()
{
    $this->dispatch(
        DynamicModalWrapper::OPEN_EVENT,
        (new OpenModalDto(
            livewireClass: CreateProductModal::class,
            params: ['id' => 12],
        ))->setName(name: 'create-product-modal')
    );
}

class CreateProductModal extends Component
{
    public function mount(int $id)
    {
        //...
    }
}

You might also want to set the OpenModalDto content background color to another color then the set default_content_wrapper_background_color_hex config value. example

use Mrjokermr\DynamicModalWrapper\Dtos\OpenModalDto;
use Mrjokermr\DynamicModalWrapper\Livewire\DynamicModalWrapper;

$this->dispatch(
    DynamicModalWrapper::OPEN_EVENT,
    (new OpenModalDto(
        livewireClass: CreateProductModal::class,
        params: ['id' => 12]
    ))->setContentBackgroundColorHex(hexColor: '#292929') //hexColor: '292929' is also valid
);

The package dispatches a closing event once the DynamicModalWrapper::CLOSE_EVENT has been triggered, before completion:

$this->dispatch(self::CLOSING_EVENT, name: $modal->name ?? $modal->getId());

Available events:

use Mrjokermr\DynamicModalWrapper\Livewire\DynamicModalWrapper;

DynamicModalWrapper::OPEN_EVENT,
DynamicModalWrapper::CLOSE_EVENT,
DynamicModalWrapper::CLOSING_EVENT, //will be dispatched before closing the modal, and dispatched the optionally set ->setName(name: 'modal-name') name.

Config

php artisan vendor:publish --tag=dynamic-modal-wrapper-config

default config:

return [
    'default_content_padding' => '1.25rem', //can be set to any CSS accepted value. Also nullable
    'escape_to_close' => true, //when the user presses the ESC button the shown modal will be closed
    'default_content_wrapper_background_color_hex' => '#ffffff', //color used for wrapping the Livewire modal content
    'wrapper_background_color_hex' => '#bdbdbd33', //color used in combination with the backdrop blur.
    
    'z-index' => 100, //used by the dynamic modal container
];