@chakra-xui/portal

A wrapper for rendering components in React Portals, with support for nested portals and stacking. No need to use z-index at all with this portal, that's right!

Installation

yarn add @chakra-xui/portal

# or

npm i @chakra-xui/portal

Import components

import { Portal, PortalManager } from "@chakra-xui/portal"

Render the PortalManager once at the root of your application

function App() {
  return (
    <ThemeProvider>
      <CSSReset />
      <PortalManager>{/* Your app goes here  */}</PortalManager>
    </ThemeProvider>
  )
}

Basic usage

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

It'll only render into document.body if you don't include PortalManager.

<div>
  <p>Welcome</p>
  <Portal>This text has been portaled</Portal>
</div>

Nested portals

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

<Portal>
  This is a portal.
  <Portal>This is a nested portal</Portal>
</Portal>

Custom container

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

<>
  <div data-testid="container" ref={ref} />
  <Portal container={() => ref.current}>
    <h1 data-testid="heading">Hello world</h1>
  </Portal>
</>

Change Log

1.0.2

Patch Changes

• Updated dependencies [e73878ee]:
  • @chakra-xui/utils@1.0.2
  • @chakra-xui/hooks@1.0.2

1.0.1

Patch Changes

• Updated dependencies [5c482483, 204ff7e3]:
  • @chakra-xui/utils@1.0.1
  • @chakra-xui/hooks@1.0.1

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0 (2020-11-13)

Note: Version bump only for package @chakra-xui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.8 (2020-10-29)

Bug Fixes

• toast: allow custom render in update (eb8bff9), closes #2362

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.7 (2020-10-25)

Note: Version bump only for package @chakra-xui/portal

1.0.0-rc.6 (2020-10-25)

Note: Version bump only for package @chakra-xui/portal

1.0.0-rc.5 (2020-09-27)

Note: Version bump only for package @chakra-xui/portal

1.0.0-rc.4 (2020-09-25)

Note: Version bump only for package @chakra-xui/portal

1.0.0-rc.3 (2020-08-30)

Note: Version bump only for package @chakra-xui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.2 (2020-08-09)

Note: Version bump only for package @chakra-xui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.1 (2020-08-06)

Note: Version bump only for package @chakra-xui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.0 (2020-07-26)

Note: Version bump only for package @chakra-xui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.7 (2020-07-26)

Note: Version bump only for package @chakra-xui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.6 (2020-07-15)

Note: Version bump only for package @chakra-xui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.5 (2020-07-15)

Note: Version bump only for package @chakra-xui/portal

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.4 (2020-07-01)

Bug Fixes

• #891 (e107acc)
• case sensitivity issues in packages (1242a46)
• ts issue with sx prop (d3b1340)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.3 (2020-06-28)

Bug Fixes

• #891 (e107acc)
• case sensitivity issues in packages (1242a46)
• ts issue with sx prop (d3b1340)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.2 (2020-06-21)

Bug Fixes

• #891 (e107acc)
• case sensitivity issues in packages (1242a46)