Needlessly Provoking Marsupials
    Have ideas to improve npm?Join in the discussion! »

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

    1.2.3 • Public • Published

    @chakra-ui/portal

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

    Installation

    yarn add @chakra-ui/portal
    
    # or
    
    npm i @chakra-ui/portal

    Import components

    import { Portal, PortalManager } from "@chakra-ui/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.

    <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 containerRef prop that points to the node of that element.

    <>
      <div ref={ref} />
      <Portal containerRef={ref}>
        <h1>Hello world</h1>
      </Portal>
    </>

    Install

    npm i @chakra-ui/portal

    DownloadsWeekly Downloads

    88,151

    Version

    1.2.3

    License

    MIT

    Unpacked Size

    53.3 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar