Nightly Procrastination Machine
    Wondering what’s next for npm?Check out our public roadmap! »

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

    1.1.0 • Public • Published

    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 @nature-ui/portal
    
    # or
    
    npm i @nature-ui/portal

    Import components

    import { Portal, PortalManager } from '@nature-ui/portal';

    Render the PortalManager once at the root of your application

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

    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>

    Install

    npm i @nature-ui/portal

    DownloadsWeekly Downloads

    0

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    14.7 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar