Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

react-warp-portal

3.0.7-alpha • Public • Published

react-warp-portal

npm package Coveralls

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.

install

npm i react-warp-portal

Downloadsweekly downloads

8

version

3.0.7-alpha

license

MIT

last publish

collaborators

  • avatar
Report a vulnerability