Render a Livewire component on a specific target in the DOM.

Overview

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's mount() 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>

The wire:portal.replace is optional, if not present, then instead of replacing the container's innerHtml, the component will be included as a new node within the container.

Have fun 🎉

FAQ

Why a new package and not a pull-request to the livewire core?

I'm using this approach right now on a project, so far it's just experimental, but if it gets enough attention, then, ideally I'd like to pull-request this changes to the livewire repository, but for now, having it as a package will give anyone the opportunity to install and test this solution.

Why i can't install this package from packagist?

This package is still under development, so I won't bother in to publishing it to packagist until having a more stable version.

You might also like...
Livewire component that brings Spotlight/Alfred-like functionality to your Laravel application.
Livewire component that brings Spotlight/Alfred-like functionality to your Laravel application.

About Wire Elements Spotlight Wire Elements Spotlight is a Livewire component that provides Spotlight/Alfred-like functionality to your Laravel applic

A dynamic table component for Laravel Livewire - For Slack access, visit:
A dynamic table component for Laravel Livewire - For Slack access, visit:

A dynamic Laravel Livewire component for data tables. Bootstrap 4 Demo | Bootstrap 5 Demo | Tailwind Demo | Demo Repository Installation You can insta

A dynamic Laravel Livewire component for multi steps form
A dynamic Laravel Livewire component for multi steps form

Livewire component that provides you with a wizard that supports multiple steps form while maintaining state.

An advanced datatable component for Laravel Livewire.
An advanced datatable component for Laravel Livewire.

Livewire Smart Table An advanced, dynamic datatable component with pagination, sorting, and searching including json data. Installation You can instal

Livewire component for dependant and/or searchable select inputs
Livewire component for dependant and/or searchable select inputs

Livewire Select Livewire component for dependant and/or searchable select inputs Preview Installation You can install the package via composer: compos

Run multiple websites using the same Laravel installation while keeping tenant specific data separated for fully independent multi-domain setups, previously github.com/hyn/multi-tenant

The unobtrusive Laravel package that makes your app multi tenant. Serving multiple websites, each with one or more hostnames from the same codebase. B

Need some filters? This package is based on the Repository Design Pattern to let you create specific queries easily.
Need some filters? This package is based on the Repository Design Pattern to let you create specific queries easily.

DevMakerLab/Laravel-Filters Need some filters? This package is based on the Repository Design Pattern to let you create specific queries easily. Insta

Run multiple websites using the same Laravel installation while keeping tenant specific data separated for fully independent multi-domain setups.

Tenancy for Laravel Enabling awesome Software as a Service with the Laravel framework. This is the successor of hyn/multi-tenant. Feel free to show su

A laravel package to handle model specific additional meta fields in an elegant way.

Laravel Meta Fields A php package for laravel framework to handle model meta data in a elegant way. Installation Require the package using composer: c

Comments
  • Workflows are referencing vulnerable actions

    Workflows are referencing vulnerable actions

    Hello, there!

    As part of the university research we are currently doing regarding the security of Github Actions, we noticed that one or many of the workflows that are part of this repository are referencing vulnerable versions of the third-party actions. As part of a disclosure process, we decided to open issues to notify GitHub Community.

    Please note that there are could be some false positives in our methodology, thus not all of the open issues could be valid. If that is the case, please let us know, so that we can improve on our approach. You can contact me directly using an email: ikoishy [at] ncsu.edu

    Thanks in advance

    1. The workflow run-tests.yml is referencing action shivammathur/setup-php using references v1. However this reference is missing the commit 7163319 which may contain fix to the vulnerability.

    The vulnerability fix that is missing by actions' versions could be related to: (1) CVE fix (2) upgrade of vulnerable dependency (3) fix to secret leak and others. Please consider updating the reference to the action.

    If you end up updating the reference, please let us know. We need the stats for the paper :-)

    opened by igibek 1
Owner
Jeff Ochoa
Web developer
Jeff Ochoa
Html-sanitizer - The HtmlSanitizer component provides an object-oriented API to sanitize untrusted HTML input for safe insertion into a document's DOM.

HtmlSanitizer Component The HtmlSanitizer component provides an object-oriented API to sanitize untrusted HTML input for safe insertion into a documen

Symfony 201 Dec 23, 2022
Programmatically create and render barcodes as images or in PDFs

laminas-barcode ???? Русским гражданам Мы, участники Laminas, родились и живем в разных странах. У многих из нас есть друзья, родственники и коллеги к

Laminas Project 22 Nov 23, 2022
Laravel-comments-livewire - Livewire components for the laravel-comments package

Associate comments and reactions with Eloquent models This package contains Livewire components to be used with the spatie/laravel-comments package. S

Spatie 15 Jan 18, 2022
Laravel Livewire full page component routing.

Laravel Livewire Routes Laravel Livewire full page component routing. This package allows you to specify routes directly inside your full page Livewir

null 22 Oct 6, 2022
Laravel Livewire form component with declarative Bootstrap 5 fields and buttons.

Laravel Livewire Forms Laravel Livewire form component with declarative Bootstrap 5 fields and buttons. Requirements Bootstrap 5 Installation composer

null 49 Oct 29, 2022
Livewire component that provides you with a modal that supports multiple child modals while maintaining state.

About LivewireUI Modal LivewireUI Modal is a Livewire component that provides you with a modal that supports multiple child modals while maintaining s

Livewire UI 806 Jan 6, 2023
Livewire component that brings Spotlight/Alfred-like functionality to your Laravel application.

About LivewireUI Spotlight LivewireUI Spotlight is a Livewire component that provides Spotlight/Alfred-like functionality to your Laravel application.

Livewire UI 792 Jan 3, 2023
A TALL-based Laravel Livewire component to replace the (multiple) select HTML input form with beautiful cards.

TALL multiselect cards A TALL-based Laravel Livewire component to replace the (multiple) select HTML input form with beautiful cards. Table of content

Frederic Habich 19 Dec 14, 2022
Laravel Livewire component to show Events in a good looking monthly calendar

Livewire Calendar This package allows you to build a Livewire monthly calendar grid to show events for each day. Events can be loaded from within the

Andrés Santibáñez 680 Jan 4, 2023
Livewire component that provides you with a modal that supports multiple child modals while maintaining state.

About Wire Elements Modal Wire Elements Modal is a Livewire component that provides you with a modal that supports multiple child modals while maintai

Wire Elements 806 Jan 6, 2023