react-warp-portal

Creates a wrap portal. All components rendered inside the warp portal will appear at the warp destination. Useful for popup menus, tooltips, overlays, dialogs, lightboxes.

Creating the components

// warp.js
import { createWarp } from 'react-warp-portal'
export const { WarpPortal, WarpDestination } = createWarp()

The generated WarpPortal and WarpDestination are entangled.

Using the created components

// App.js
import { WarpDestination } from './warp'
 
// ...
  render () {
    return <div>
      {/* ... */}
      <WarpDestination /> {/* things went into WarpPortal will display here */}
    <div>
  }
// ...

// SomewhereElse.js
import { WarpPortal } from './warp'
 
// ...
  render () {
    return <div>
      <WarpPortal content={<div>This displays at the WarpDestination.</div>}>
        <p>This displays here.</p>
      </WarpPortal>
    </div>
  }
// ...

The rendered content is entangled with the WarpSource. You can access this.context.warpSource to obtain the DOM node. This allows positioning such as tooltips.