# preact-portal
**Repository Path**: mirrors_developit/preact-portal
## Basic Information
- **Project Name**: preact-portal
- **Description**: :satellite: Render Preact components in (a) SPACE :milky_way: :stars:
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-05-16
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 🌌 preact-portal ðŸŒ
[](https://www.npmjs.org/package/preact-portal)
[](https://travis-ci.org/developit/preact-portal)
### **Render [Preact] components into SPACE**\*
_\* a space in the DOM. Sorry._
> Use this if you have a component that needs to render children into some other place in the DOM.
>
> An example of this would be modal dialogs, where you may need to render `` into ``.
| [Demo #1] | [Demo #2] |
|:---------:|:---------:|
| _Moving around the DOM by changing `into`._ | _Open a full-page modal from within a thumbnail._ |
| 
| 
|
---
## Installation
Via npm:
`npm install --save preact-portal`
## Usage
```js
import { h, Component, render } from 'preact';
import Portal from 'preact-portal';
class Thumbnail extends Component {
open = () => this.setState({ open:true });
close = () => this.setState({ open:false });
render({ url }, { open }) {
return (
{ open ? (
) : null }
);
}
}
render(, document.body);
```
---
Or, wrap up a very common case into a simple high order function:
```js
const Popup = ({ open, into="body", children }) => (
open ? { children } : null
);
// Example: show popup on error.
class Form extends Component {
render({}, { error }) {
return (
);
}
}
```
[preact]: https://github.com/developit/preact
[Demo #1]: http://jsfiddle.net/developit/bsr7gmdd/
[Demo #2]: http://jsfiddle.net/developit/f1jmxtvg/