React Portal Component

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 (creates a new independent React tree)
  • can be opened by the prop isOpened
  • 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

Preview:

React-portal

Download Details:

Author: tajo

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/tajo/react-portal

License: MIT

You Might Be Interested In:

Add Comment