{"id":13525163,"url":"https://github.com/developit/preact-portal","last_synced_at":"2025-04-05T10:08:28.062Z","repository":{"id":43465274,"uuid":"53229795","full_name":"developit/preact-portal","owner":"developit","description":":satellite: Render Preact components in (a) SPACE :milky_way: :stars:","archived":false,"fork":false,"pushed_at":"2020-07-06T09:38:43.000Z","size":16,"stargazers_count":180,"open_issues_count":8,"forks_count":23,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T09:09:18.215Z","etag":null,"topics":["dom","preact","preact-components","preact-portal"],"latest_commit_sha":null,"homepage":"http://npm.im/preact-portal","language":"JavaScript","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/developit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-06T00:18:05.000Z","updated_at":"2025-03-03T00:28:17.000Z","dependencies_parsed_at":"2022-09-14T19:01:56.756Z","dependency_job_id":null,"html_url":"https://github.com/developit/preact-portal","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fpreact-portal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fpreact-portal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fpreact-portal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developit%2Fpreact-portal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/developit","download_url":"https://codeload.github.com/developit/preact-portal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246586050,"owners_count":20801026,"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":["dom","preact","preact-components","preact-portal"],"created_at":"2024-08-01T06:01:16.489Z","updated_at":"2025-04-05T10:08:28.041Z","avatar_url":"https://github.com/developit.png","language":"JavaScript","readme":"# 🌌 preact-portal 🌠\n\n[![NPM](https://img.shields.io/npm/v/preact-portal.svg?style=flat)](https://www.npmjs.org/package/preact-portal)\n[![travis-ci](https://travis-ci.org/developit/preact-portal.svg?branch=master)](https://travis-ci.org/developit/preact-portal)\n\n### **Render [Preact] components into SPACE**\\*\n\n_\\* a space in the DOM. Sorry._\n\n\u003e Use this if you have a component that needs to render children into some other place in the DOM.\n\u003e\n\u003e An example of this would be modal dialogs, where you may need to render `\u003cDialog /\u003e` into `\u003cbody\u003e`.\n\n\n| [Demo #1] | [Demo #2] |\n|:---------:|:---------:|\n| _Moving around the DOM by changing `into`._ | _Open a full-page modal from within a thumbnail._ |\n| \u003cimg src=\"https://i.gyazo.com/c08ff6fb5b3dc7da41099cb5c743ac86.gif\" width=\"232\"\u003e | \u003cimg src=\"https://i.gyazo.com/afe7ebdaa2591dac92753af7066ac437.gif\" width=\"176\"\u003e |\n\n\n\n---\n\n\n## Installation\n\nVia npm:\n\n`npm install --save preact-portal`\n\n\n\n## Usage\n\n```js\nimport { h, Component, render } from 'preact';\nimport Portal from 'preact-portal';\n\nclass Thumbnail extends Component {\n  open = () =\u003e this.setState({ open:true });\n  close = () =\u003e this.setState({ open:false });\n\n  render({ url }, { open }) {\n    return (\n      \u003cdiv class=\"thumb\" onClick={this.open}\u003e\n        \u003cimg src={url} /\u003e\n\n        { open ? (\n          \u003cPortal into=\"body\"\u003e\n            \u003cdiv class=\"popup\" onClick={this.close}\u003e\n              \u003cimg src={url} /\u003e\n            \u003c/div\u003e\n          \u003c/Portal\u003e\n        ) : null }\n      \u003c/div\u003e\n    );\n  }\n}\n\nrender(\u003cThumbnail url=\"//i.imgur.com/6Rp4hbs.gif\" /\u003e, document.body);\n```\n\n\n---\n\n\nOr, wrap up a very common case into a simple high order function:\n\n```js\nconst Popup = ({ open, into=\"body\", children }) =\u003e (\n  open ? \u003cPortal into={into}\u003e{ children }\u003c/Portal\u003e : null\n);\n\n// Example: show popup on error.\nclass Form extends Component {\n  render({}, { error }) {\n    return (\n      \u003cform\u003e\n        \u003cPopup open={error}\u003e\n          \u003cp\u003eError: {error}\u003c/p\u003e\n        \u003c/Popup\u003e\n        ...etc\n      \u003c/form\u003e\n    );\n  }\n}\n```\n\n\n[preact]: https://github.com/developit/preact\n[Demo #1]: http://jsfiddle.net/developit/bsr7gmdd/\n[Demo #2]: http://jsfiddle.net/developit/f1jmxtvg/\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopit%2Fpreact-portal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevelopit%2Fpreact-portal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopit%2Fpreact-portal/lists"}