@teste-ui/portal

A wrapper for rendering components in React Portals, with support for nested portals and stacking.

Installation

1yarn add @teste-ui/portal
2
3# or
4
5npm i @teste-ui/portal

Import components

1import { Portal, PortalManager } from "@teste-ui/portal"

Render the PortalManager once at the root of your application

1function App() {
2  return (
3    <ThemeProvider>
4      <CSSReset />
5      <PortalManager>{/* Your app goes here  */}</PortalManager>
6    </ThemeProvider>
7  )
8}

Basic usage

Portals are render into the portal manager's node by default not document.body.

1<div>
2  <p>Welcome</p>
3  <Portal>This text has been portaled</Portal>
4</div>

Nested portals

Nesting portal can be very useful to build complex widgets like nested menu, popovers, modal, etc.

1<Portal>
2  This is a portal.
3  <Portal>This is a nested portal</Portal>
4</Portal>

Custom container

You can also portal elements into a custom containers. Simply pass a containerRef prop that points to the node of that element.

1<>
2  <div ref={ref} />
3  <Portal containerRef={ref}>
4    <h1>Hello world</h1>
5  </Portal>
6</>