Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including preact-portal with all npm packages installed. Try it out:

require("preact/package.json"); // preact is a peer dependency. var preactPortal = require("preact-portal")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

preact-portal v1.1.3

Render Preact components somewhere in [a different] space.

🌌 preact-portal 🌠

NPM travis-ci

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>.

Demo #1Demo #2
Moving around the DOM by changing into.Open a full-page modal from within a thumbnail.


Via npm:

npm install --save preact-portal


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={}>
        <img src={url} />

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

render(<Thumbnail url="//" />, document.body);

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

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 (
        <Popup open={error}>
          <p>Error: {error}</p>
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free