Livewire Portals
Render a Livewire component on a specific target in the DOM.
Install
THIS PACKAGE IS STILL IN DEVELOPMENT, TO USE, PLEASE ADD THE FOLLOWING REPOSITORY - NOT READY FOR PRODUCTION YET
// composer.json
{
"repositories": {
"jeffochoa/livewire-portals": {
"type": "vcs",
"url": "[email protected]:jeffochoa/livewire-portals.git"
}
}
}
This package require some of the livewire directives to be registered first, so you'll need to disable the package auto-discovery and add manually the service-providers in your config/app.php file:
// composer.json
{
"extra": {
"laravel": {
"dont-discover": [
"jeffochoa/livewire-portals",
"livewire/livewire"
]
}
},
}
In the config/app.php file:
return [
'providers' => [
// ...
Livewire\LivewireServiceProvider::class,
Jeffochoa\LivewirePortal\LivewirePortalServiceProvider::class
]
];
Use case
Let's say you have a message-window livewire component to display a message in the view after running an action in the application, like a mail-list subscription.
Your mail-list subscription component is also, a livewire component.
@livewire('newsletter')
In the component class, you'll probably have a method to handle the form submission:
class Newsletter extends Component {
public function create()
{
// handle subscription
// push notification
}
}
So, instead of pushing notifications through events, and so on, we just want to append the message-window component in the view, that's it.
How could we do that?
Using Livewire portals
This package allows you to open a portal to append any livewire component in the DOM in runtime.
This is how it looks:
Open a new portal and push the message-window after registering a new subscription in your newsletter component.
class Newsletter extends Component {
public function create()
{
// handle subscription
// push notification
$this->openPortal(
$target = 'messages-container',
$component = 'message-window',
$componentAttributes = ['text' => 'You are subscribed']
);
}
}
The $componentAttributes variable will be passed down to the
message-window'smount()method.
Then, somewhere in the DOM you just need to include the new portal (container);
"><div wire:portal="messages-container" wire:portal.replace wire:portal-end="console.log('The DOM is updated')">div>
790 Dec 27, 2022
1.3k Jan 1, 2023
233 Jan 4, 2023
87 Oct 13, 2022
441 Dec 19, 2022
2.4k Jan 3, 2023
19 Feb 20, 2022
26 Apr 5, 2022
201 Dec 23, 2022
22 Nov 23, 2022
15 Jan 18, 2022
22 Oct 6, 2022
806 Jan 6, 2023
19 Dec 14, 2022
680 Jan 4, 2023