{"id":13540816,"url":"https://github.com/jeffochoa/livewire-portals","last_synced_at":"2025-04-02T08:30:49.235Z","repository":{"id":83065797,"uuid":"279567498","full_name":"jeffochoa/livewire-portals","owner":"jeffochoa","description":null,"archived":false,"fork":false,"pushed_at":"2020-07-14T11:34:30.000Z","size":11,"stargazers_count":24,"open_issues_count":0,"forks_count":1,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-11-03T06:32:53.514Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeffochoa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-14T11:34:03.000Z","updated_at":"2024-06-05T19:23:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"ba00936a-78af-46d8-9125-6dd48926d72f","html_url":"https://github.com/jeffochoa/livewire-portals","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffochoa%2Flivewire-portals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffochoa%2Flivewire-portals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffochoa%2Flivewire-portals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffochoa%2Flivewire-portals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeffochoa","download_url":"https://codeload.github.com/jeffochoa/livewire-portals/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246781840,"owners_count":20832917,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T10:00:33.305Z","updated_at":"2025-04-02T08:30:49.228Z","avatar_url":"https://github.com/jeffochoa.png","language":"PHP","funding_links":[],"categories":["Packages / Plugins"],"sub_categories":[],"readme":"# Livewire Portals\n\nRender a [Livewire](https://github.com/livewire/livewire) component on a specific target in the DOM.\n\n## Install\n\nTHIS PACKAGE IS STILL IN DEVELOPMENT, TO USE, PLEASE ADD THE FOLLOWING REPOSITORY - NOT READY FOR PRODUCTION YET\n\n```json\n// composer.json\n{\n    \"repositories\": {\n        \"jeffochoa/livewire-portals\": {\n            \"type\": \"vcs\",\n            \"url\": \"git@github.com:jeffochoa/livewire-portals.git\"\n        }\n    }\n}\n```\n\nThis 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:\n\n```php\n// composer.json\n{\n    \"extra\": {\n        \"laravel\": {\n            \"dont-discover\": [\n                \"jeffochoa/livewire-portals\",\n                \"livewire/livewire\"\n            ]\n        }\n    },\n}\n```\n\nIn the `config/app.php` file:\n\n```php\nreturn [\n    'providers' =\u003e [\n        // ...\n        Livewire\\LivewireServiceProvider::class,\n        Jeffochoa\\LivewirePortal\\LivewirePortalServiceProvider::class\n    ]\n];\n```\n\n## Use case\n\nLet'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.\n\nYour mail-list subscription component is also, a livewire component.\n\n```html\n@livewire('newsletter')\n```\n\nIn the component class, you'll probably have a method to handle the form submission:\n\n```php\nclass Newsletter extends Component {\n    public function create()\n    {\n        // handle subscription\n\n        // push notification\n    }\n}\n```\n\nSo, instead of pushing notifications through events, and so on, we just want to append the `message-window` component in the view, that's it.\n\nHow could we do that? 🤔\n\n## Using Livewire portals\n\nThis package allows you to `open` a portal to append any livewire component in the DOM in runtime.\n\nThis is how it looks:\n\nOpen a new portal and push the `message-window` after registering a new subscription in your `newsletter` component.\n\n```php\nclass Newsletter extends Component {\n    public function create()\n    {\n        // handle subscription\n\n        // push notification\n        $this-\u003eopenPortal(\n            $target = 'messages-container',\n            $component = 'message-window',\n            $componentAttributes = ['text' =\u003e 'You are subscribed']\n        );\n    }\n}\n```\n\n\u003e The $componentAttributes variable will be passed down to the `message-window`'s `mount()` method.\n\nThen, somewhere in the DOM you just need to include the new portal (container);\n\n```html\n\u003cdiv\n    wire:portal=\"messages-container\"\n    wire:portal.replace\n    wire:portal-end=\"console.log('The DOM is updated')\"\u003e\u003c/div\u003e\n```\n\n\u003e 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.\n\nHave fun 🎉\n\n## FAQ\n\n**Why a new package and not a pull-request to the livewire core?**\n\nI'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.\n\n**Why i can't install this package from packagist?**\n\nThis package is still under development, so I won't bother in to publishing it to packagist until having a more stable version.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffochoa%2Flivewire-portals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeffochoa%2Flivewire-portals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffochoa%2Flivewire-portals/lists"}