The react-portal package allows you to render components into a DOM node that exists outside the DOM hierarchy of the parent component. This is useful for creating modals, tooltips, and other UI elements that need to be rendered outside the main document flow.

What are react-portal's main functionalities?

Basic Portal Usage

This example demonstrates the basic usage of the react-portal package. It renders a div element outside the main DOM hierarchy, which can be useful for creating modals or tooltips.

import React from 'react';
import ReactDOM from 'react-dom';
import { Portal } from 'react-portal';

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Portal>
        <div style={{ position: 'absolute', top: '50px', left: '50px', background: 'white', border: '1px solid black', padding: '10px' }}>
          This is a portal content
        </div>
      </Portal>
    </div>
  );
}

export default App;

Custom Portal Target

This example shows how to use a custom DOM node as the target for the portal. The content will be rendered inside the specified custom target element.

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import { Portal } from 'react-portal';

function App() {
  const customTarget = useRef(null);

  return (
    <div>
      <h1>Main App</h1>
      <div ref={customTarget} id="custom-target" style={{ position: 'relative', height: '200px', border: '1px solid black' }}>
        Custom Target
      </div>
      <Portal node={customTarget.current}>
        <div style={{ position: 'absolute', top: '10px', left: '10px', background: 'white', border: '1px solid black', padding: '10px' }}>
          This is a portal content inside custom target
        </div>
      </Portal>
    </div>
  );
}

export default App;

Other packages similar to react-portal

Readme

Source

React-portal

Struggling with modals, lightboxes or loading bars in React? Look no further. This is the component that will help you.

Features

transports its child into a new React component and appends it to the document.body
propagates all props
can be opened by the prop isOpened
can be opened after click on an element that you pass through the prop openByClickOn (and then it takes care of the state)
doesn't leave any mess after closing
provides its child with this.props.closePortal callback
provides close on ESC and close on outside mouse click out of the box (see the docs)

Demo

Try http://miksu.cz/react-portal

Or git clone http://github.com/tajo/react-portal and open /examples/index.html

Installation

npm install react-portal --save

Usage

var React = require('react');
var Portal = require('react-portal');

var App = React.createClass({

  render: function() {
    var button1 = <button>Open portal with pseudo modal</button>;

    return (
      <Portal openByClickOn={button1} closeOnEsc={true} closeOnOutsideClick={true}>
        <PseudoModal>
          <h2>Pseudo Modal</h2>
          <p>This react component is appended to the document body.</p>
        </PseudoModal>
      </Portal>
    );
  }

});

var PseudoModal = React.createClass({

  render: function() {
    return (
      <div>
        {this.props.children}
        <p><button onClick={this.props.closePortal}>Close this</button></p>
      </div>
    );
  }

});

React.render(React.createElement(App), document.getElementById('react-body'));

Documentation - props

children : ReactElement (required)

The Portal expects one child (<Portal><Child ... /></Portal>) that will be ported.

isOpened : bool (optional)

If true, the portal is open. If false, the portal is closed. It's up to you to take care of the closing (aka taking care of the state).

openByClickOn : ReactElement (optional)

The second way how to open the portal. This element will be rendered by the portal immediately with onClick = open portal. How to close the portal then? It provides its child with the callback this.props.closePortal. Or you can use built-in portal closing (see bellow). Notice that you don't have to deal with the state (like when using the isOpened prop).

closeOnEsc: bool (optional)

If true, the portal can be closed by the key ESC.

closeOnOutsideClick: bool (optional)

If true, the portal can be closed by the outside mouse click.

Contribution

Please, create issues and pull requests.

git clone https://github.com/tajo/react-portal
cd react-portal
npm install
npm run dev

Credits

Inspired by the talk React.js Conf 2015 - Hype!, Ryan Florence

Vojtech Miksu 2015, miksu.cz, @vmiksu

Keywords

FAQs

What is react-portal?

Is react-portal well maintained?

Last updated on 03 Apr 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-portal