Nuanced Pterodactyl Monk


    1.0.3 • Public • Published


    npm version npm downloads

    This Project is a fork of React Portal that implement Stateless version of it.

    Struggling with modals, lightboxes or loading bars in React? React-portal creates a new top-level React tree and injects its child into it. That's necessary for proper styling (especially positioning).

    react-portal is being rewritten, you are reading v3.x.x documentation


    • transports its child into a new React component and appends it to the document.body (creates a new independent React tree)
    • can be opened by the prop isOpen
    • doesn't leave any mess in DOM after closing
    • provides its child with this.props.closePortal callback
    • provides close on ESC and close on outside mouse click out of the box
    • supports absolute positioned components (great for tooltips)
    • no dependencies


    Try or

    git clone
    cd react-portal
    npm install
    npm run build:examples
    open examples/index.html


    npm install react react-dom react-portal --save


    import React from 'react';
    import ReactDOM from 'react-dom';
    import Portal from 'react-portal';
    export default class App extends React.Component {
      constructor(props) {
        this.state = {
          isPortalOpen: true
      onClose() {
          isPortalOpen: false
      onOpen() {
          isPortalOpen: true
      render() {
        return (
            <button onClick={() => this.onOpen}>Open Portal</button>
            <Portal isOpen={this.state.isPortalOpen} closeOnEsc closeOnOutsideClick onClose={() => this.onClose}>
                <h2>Pseudo Modal</h2>
                <p>This react component is appended to the document body.</p>
    export class PseudoModal extends React.Component {
      render() {
        return (
            <p><button onClick={this.props.closePortal}>Close this</button></p>
    ReactDOM.render(<App />, document.getElementById('react-body'));

    Documentation - props

    Always required

    children : ReactElement

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


    isOpen : bool

    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). Don't use this prop if you want to make your life easier. Use openByClickOn instead!

    closeOnEsc: bool

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

    closeOnOutsideClick: bool

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

    onClose: func

    This callback is called when the portal closes and after beforeClose.

    onUpdate: func

    This callback is called when the portal is (re)rendered.

    Tips & Tricks

    • Does your modal have a fullscreen overlay and the closeOnOutsideClick doesn't work? There is a simple solution.
    • Does your inner inner component <LevelTwo />
        <LevelTwo />

    also need an access to this.props.closePortal()? You can't just use {this.props.children} in render method of <LevelOne> component. You have to clone it instead:

      {closePortal: this.props.closePortal}

    Open modal programmatically

    Sometimes you need to open your portal (e.g. modal) automatically. There is no button to click on. No problem, because the portal has the isOpen prop, so you can just set it to true or false.


    Please, create issues and pull requests.

    git clone
    cd react-portal
    npm install
    npm start
    open http://localhost:3000

    Don't forget to run this before every commit:

    npm test

    Credits (Forked from)

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

    Vojtech Miksu 2015,, @vmiksu


    Victor Arêas 2017


    npm i react-portal-stateless

    DownloadsWeekly Downloads






    Last publish


    • siminino