README

Installation

Requires:

Via Composer:

composer require linuxstreet/wire-content-loader

Usage

Seamlessly integrate dynamic content into any part of your web page. By specifying a unique ID for each loader, you can ensure accurate and independent loading of content within multiple containers. This feature is particularly valuable for Single-Page Applications (SPAs) or when you need to dynamically load components for a more interactive user experience.

Place content loader with default ID

<livewire:content-loader/>

Set content loader ID to 'menu'

<livewire:content-loader id="menu"/>

Set ID to 'sidebar' and initially load Blade view into it.

<livewire:content-loader id="sidebar" view="my-blade-view"/>

Set ID to 'footer' and initially load Livewire component into it.

<livewire:content-loader id="footer" component="my-livewire-component"/>

Content loader is listening for 'content-load' browser event.

AlpineJS @click example:

<button x-data @click.throttle="$dispatch('content-load', [=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:

forceReload: [true|false] - Use only when loading Livewire component. Forces component to re-render if called multiple times. (default: false)
spinner: [true|false] - Enable/Disable loading spinner inside the loader while content is loading. (default: true)
spinnerClass: [string] - Pass additional CSS classes to the loading spinner (default: '')
target: [string] - Use only if multiple content loaders present on page. (default: 'main')
hideWhileLoading: [true|false] - Show/hide content while re-loading the component.(default: false)
params: [array] - Pass additional params to Component/View (default: [])

Examples:

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

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

Here are some examples with optional params:

{ component: 'my-component', forceReload: true }
{ component: 'my-component', forceReload: true, hideWhileLoading: false }
{ component: 'my-component', forceReload: false, target: 'sidebar }
{ view: 'my-view', target: 'footer, spinner: false }
{ view: 'my-view', target: 'footer, spinner: false, params: { id: 5 } }

Examples with HTML button element using AlpineJS:

<button x-data @click.throttle="$dispatch('content-load', [{ component: 'my-component', forceReload: true }] )">Show</button>
<button x-data @click.throttle="$dispatch('content-load', [{ component: 'my-component', forceReload: true, hideWhileLoading: false }] )">Show</button>
<button x-data @click.throttle="$dispatch('content-load', [{ component: 'my-component', forceReload: true, params: { id: 1 } }] )">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\WireContentLoader\WireContentLoaderServiceProvider"

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.

linuxstreet / wire-content-loader

Maintainers

Details