@cala/react-portal
v0.1.3
Published
Portal your react components without the DOM.
Downloads
183
Readme
React Portal
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.
Status
| Branch | URL | Build Status |
| -------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| master
| https://www.npmjs.com/package/@cala/react-portal | |
Installation
npm install @cala/react-portal --save
Usage
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.