Neverending Package Mountain
    Wondering what’s next for npm?Check out our public roadmap! »

    @chakra-xui/portal
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    @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>
    </>

    Install

    npm i @chakra-xui/portal

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    51.7 kB

    Total Files

    23

    Last publish

    Collaborators

    • avatar