This library provides the ability to render children into a node that can exist outside the direct hierarchy of the parent component. React's Portal is specifically tied to the DOM, meaning that React applications that need to portal children to a non-DOM based location are out of luck. These cases range from applications built with React Native to interfacing with WebGL.
| Branch | URL | Build Status |
|---|---|---|
master |
https://www.npmjs.com/package/@cala/react-portal |  |
npm install @cala/react-portal --save
Import components individually.
import { EntrancePortal, ExitPortal, PortalProvider } from '@cala/react-portal';Or wrap it into a single statement.
import * as ReactPortal from '@cala/react-portal';In order to use the EntrancePortal and ExitPortal, a single PortalProvider will need to enclose the part of the component tree that uses either Portal component. Here's a very simple example of how to use these three components.
<PortalProvider>
<div>
<h1>Hello, World.</h1>
<EntrancePortal name='one'>I'm in a portal!</EntrancePortal>
<p>Sample body content.</p>
<ExitPortal name='one' />
</div>
</PortalProvider>The rendered output of the above JSX statement will place the textual content of <EntrancePortal /> at the place of <ExitPortal />. In effect, the rendered output will look something like:
<div>
<h1>Hello, World.</h1>
<p>Sample body content.</p>
I'm in a portal!
</div>For more examples, see the tests written in src/spec.tsx.
To tag off and release a new version to npm, run the release script:
$ ./bin/release patch # 0.0.x - bug fixes
$ ./bin/release minor # 0.x.0 - new features or changes
$ ./bin/release major # x.0.0 - large, backwards-incompatible changes