3.0.7-alpha • Published 6 years ago
react-warp-portal v3.0.7-alpha
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.
3.0.7-alpha
6 years ago
2.2.2-delta
7 years ago
2.2.1-delta
7 years ago
2.2.0-delta
8 years ago
2.1.1
8 years ago
2.1.0
8 years ago
2.0.0
8 years ago
1.0.1
8 years ago