npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-portal-daniellangnet

v3.0.0

Published

React component for transportation of modals, lightboxes, loading bars... to document.body

Downloads

10

Readme

React-portal

npm version npm downloads Build Status

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

Features

  • transports its child into a new React component and appends it to the document.body or a custom container (creates a new independent React tree)
  • can be opened by the prop isOpen
  • can be opened after a click on an element that you pass through the prop openByClickOn (and then it takes care of the open/close state)
  • 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
  • fully covered by tests

Demo

Try https://miksu.cz/react-portal or

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

Installation

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

Usage

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

export default class App extends React.Component {

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

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

}

export class PseudoModal extends React.Component {

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

}

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.

One of these two required

isOpen : bool

The V3 version uses isOpened. Renaming to isOpen is going to be released soon with the V4.

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!

openByClickOn : ReactElement

The second way how to open the portal. This element will be rendered by the portal immediately with onClick handler that triggers portal opening. How to close the portal then? The portal provides its ported child with a callback this.props.closePortal. Or you can use built-in portal closing methods (closeOnEsc, ... more below). Notice that you don't have to deal with the open/close state (like when using the isOpen prop).

Optional

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.

onOpen: func(DOMNode)

This callback is called when the portal is opened and rendered (useful for animating the DOMNode).

beforeClose: func(DOMNode, removeFromDOM)

This callback is called when the closing event is triggered but it prevents normal removal from the DOM. So, you can do some DOMNode animation first and then call removeFromDOM() that removes the portal from DOM.

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.

target: string

Pass to render popup in a custom container instead of document.body. The container should be found by data attribute [data-portaltarget=${props.target}]. There's also a helper component PortalTarget which creates an element with data-portaltarget={props.name}:

import React from 'react';
import Portal, {PortalTarget} from 'react-portal';

function App() {
  return (
    <div>
        <PortalTarget name="target-id" />
        
        // renders inside PortalTarget
        <Popup target="target-id" />
    </div>
  );
}

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 />
<Portal>
  <LevelOne>
    <LevelTwo />
  </LevelOne>
</Portal>

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:

{React.cloneElement(
  this.props.children,
  {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. However, then it's completely up to you to take care about the portal closing (ESC, outside click, no this.props.closePortal callback...).

However, there is a nice trick how to make this happen even without isOpen:

<Portal ref="myPortal">
  <PseudoModal title="My modal">
    Modal content
  </PseudoModal>
</Portal>
this.refs.myPortal.openPortal()
// opens the portal, yay!

Contribution

Please, create issues and pull requests.

git clone https://github.com/tajo/react-portal
cd react-portal
npm install
npm start
open http://localhost:3000

Don't forget to run this before every commit:

npm test

Credits

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

Vojtech Miksu 2015, miksu.cz, @vmiksu