preact-portal

KO | EN

gitlite — search

#javascript #ai #llm #android #machine-learning #rust #macos #java #cli #kubernetes #vue #ios #mcp #openai

(★ 183)

:satellite: Render Preact components in (a) SPACE :milky_way: :stars:

File Explorer

Download Latest Version (.zip)

- preact-portal.js
- preact-portal.js
.babelrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
.npmignore
.travis.yml
karma.conf.js
LICENSE
package.json
README.md
rollup.config.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🌌 preact-portal 🌠

[![NPM](https://img.shields.io/npm/v/preact-portal.svg?style=flat)](https://www.npmjs.org/package/preact-portal)
[![travis-ci](https://travis-ci.org/developit/preact-portal.svg?branch=master)](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 `<Dialog />` into `<body>`.

---

## 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 (
      <div class="thumb" onClick={this.open}>
        <img src={url} />

{ open ? (
          <Portal into="body">
            <div class="popup" onClick={this.close}>
              <img src={url} />
            </div>
          </Portal>
        ) : null }
      </div>
    );
  }
}

render(<Thumbnail url="//i.imgur.com/6Rp4hbs.gif" />, document.body);
```

---

Or, wrap up a very common case into a simple high order function:

```js
const Popup = ({ open, into="body", children }) => (
  open ? <Portal into={into}>{ children }</Portal> : null
);

// Example: show popup on error.
class Form extends Component {
  render({}, { error }) {
    return (
      <form>
        <Popup open={error}>
          <p>Error: {error}</p>
        </Popup>
        ...etc
      </form>
    );
  }
}
```

[preact]: https://github.com/developit/preact
[Demo #1]: http://jsfiddle.net/developit/bsr7gmdd/
[Demo #2]: http://jsfiddle.net/developit/f1jmxtvg/

preact-portal

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

preact-portal

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README