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.jsconst WarpPortal WarpDestination =
The generated WarpPortal and WarpDestination are entangled.
Using the created components
// App.js // ... { return <div> /* ... */ <WarpDestination /> /* things went into WarpPortal will display here */ <div> }// ...
// SomewhereElse.js // ... { 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.