linuxstreet/wire-content-modal

Flexible way of loading Livewire component or Blade view inside a modal.

v1.0.5 2025-02-11 16:14 UTC

Requires

• php: ^8.1
• livewire/livewire: ^3.5

Requires (Dev)

• orchestra/testbench: ^9.6
• pestphp/pest: ^3.6
• pestphp/pest-plugin-laravel: ^3.0
• pestphp/pest-plugin-livewire: ^3.0

MIT

• Igor Jovanovic

• php
• content
• laravel
• modal
• livewire
• alpinejs

README

Installation

Requires:

• PHP version 8.1 or later
• Laravel version 10 or later
• Livewire version 3 or later
• TailwindCSS version 3.4 or later
• AlpineJS

Via Composer:

composer require linuxstreet/wire-content-modal

Modify your tailwind.config.js file, so it includes this package when building assets.

export default {
    content: [
        ...
        './vendor/linuxstreet/wire-content-modal/resources/views/**/*.blade.php',
    ],

Usage

In web development, often we need to overlay a smaller window, or modal, on top of the main page to display additional information or allow user interaction. This modal can be populated with content from different sources, such as a Livewire component or a Blade view.

Place component on the web page

<livewire:content-modal/>

Modal is listening for 'modal-show' and 'modal-hide' browser events.

AlpineJS @click example:

<button x-data @click.throttle="$dispatch('modal-show', [=PARAMS])">Show</button>

Params:

Mandatory:

• component: [string] - Name of the Livewire component to be loaded
• OR
• view: [string] - Name of the Blade view to be loaded

NOTE: If neither component or view is provided, Exception will be thrown.

Optional:

• spinnerClass: [string] - Pass additional CSS classes to the loading spinner (default: '')
• params: [array] - Pass additional params to Component/View (default: [])

Examples:

Provide either 'component' or 'view' options like this:

{ component: 'livewire_component' }
or
{ view: 'blade_view' }

Examples with HTML button element using AlpineJS:

<button x-data @click.throttle="$dispatch('modal-show', [{ component: 'my-component' }] )">Show</button>
<button x-data @click.throttle="$dispatch('modal-show', [{ view: 'my-view' }] )">Show</button>

Change log

Please see the changelog for more information on what has changed recently.

Layout Customisation

This package uses TailwindCSS classes. If you want to customize the layout for different CSS framework use:

php artisan vendor:publish --provider="Linuxstreet\WireContentModal\WireContentModalServiceProvider"

Testing

./vendor/bin/pest

Contributing

Please see contributing.md for details.

Security

If you discover any security related issues, please email author email instead of using the issue tracker.

Credits

• Igor Jovanovic

License

Please see the license file for more information.