Yo guys, I want to introduce . It's a React.js for . t helps you render children into a DOM node that exists outside the DOM hierarchy of the parent component. From now on you will never need to struggle with modals, dropdowns, tooltips etc. Check the section out to learn more. Hope you guys 👍🏻 it. react-cool-portal hook Portals features ⚡️ Try yourself: https://react-cool-portal.netlify.app Features 🍒 Renders an element or component to <body> or . a specified DOM element 🎣 React feat. . Portals Hook 🤖 Built-in , event listeners, and many for a comprehensive DX. state controllers useful features 🧱 Used as a scaffold to . build your customized hook 🧹 Auto removes the un-used portal container for you. Doesn't produce any DOM mess. 📜 Support type definition. TypeScript 🗄️ Server-side rendering compatibility. 🦔 Tiny size ( ). No external dependencies, aside for the react and react-dom. ~ 1KB gzipped Usage Here are some minimal examples of how does it work. You can learn more about it by checking the out. API Basic Use Case Inserts an element or component into a different location in the DOM. usePortal ; App = { { Portal } = usePortal(); ( <Portal>
        <p>
          Wow! I am rendered outside the DOM hierarchy of my parent component.
        </p>
      </Portal> );
}; import from "react-cool-portal" const => () const return < > div </ > div By default, the children of portal is rendered into of . You can specify the DOM element you want through the option. <div id="react-cool-portal"> <body> containerId usePortal ; App = { { Portal } = usePortal({ : }); ( <Portal>
        <p>Now I am rendered into the specify element (id="my-portal-root").</p>
      </Portal> );
}; import from "react-cool-portal" const => () const containerId "my-portal-root" return < > div </ > div Note: If the container element doesn't exist, we will create it for you. Use with State provides many useful features, which enable you to build a component with state. For instance, modal, dropdown, tooltip, and so on. react-cool-portal usePortal ; App = { { Portal, isShow, show, hide, toggle } = usePortal({ : , onShow: { }, : { },
  }); ( <button onClick={show}>Open Modal</button> <button onClick={hide}>Close Modal</button> <button onClick={toggle}>{isShow ? "Close" : "Open"} Modal</button> <Portal>
        <div className="modal" tabIndex={-1}>
          <div
            className="modal-dialog"
            role="dialog"
            aria-labelledby="modal-label"
            aria-modal="true"
          >
            <div className="modal-header">
              <h5 id="modal-label" className="modal-title">
                Modal title
              </h5>
            </div>
            <div className="modal-body">
              <p>Modal body text goes here.</p>
            </div>
          </div>
        </div>
      </Portal> );
}; import from "react-cool-portal" const => () const defaultShow false // The default visibility of portal, default is true ( ) => e // Triggered when portal is shown // The event object will be the parameter of "show(e?)" onHide ( ) => e // Triggered when portal is hidden // The event object will be the parameter of "hide(e?)", it maybe MouseEvent (on clicks outside) or KeyboardEvent (press ESC key) return < > div </ > div 🧹 When no element in the container, we will remove it for you to avoid DOM mess. The above example shows how easy you can handle the visibility of your component. You may ask how to handle the visibility with animations? No worries, you can disable the built-in functions by setting the option as then handling the visibility of your component via the state. show/hide internalShowHide false isShow usePortal ; App = { { Portal, isShow, show, hide, toggle } = usePortal({ : , : , onShow: { }, : { },
  }); ( <button onClick={show}>Open Modal</button> <button onClick={hide}>Close Modal</button> <button onClick={toggle}>{isShow ? "Close" : "Open"} Modal</button> <Portal>
        <div
          // Now you can use the "isShow" state to handle the CSS animations
          className={`modal${isShow ? " modal-open" : ""}`}
          tabIndex={-1}
        >
          <div
            className="modal-dialog"
            role="dialog"
            aria-labelledby="modal-label"
            aria-modal="true"
          >
            <div className="modal-header">
              <h5 id="modal-label" className="modal-title">
                Modal title
              </h5>
            </div>
            <div className="modal-body">
              <p>Modal body text goes here.</p>
            </div>
          </div>
        </div>
      </Portal> );
}; import from "react-cool-portal" const => () const defaultShow false internalShowHide false // Disable the built-in show/hide portal functions, default is true ( ) => e // Triggered when "isShow" is set to true onHide ( ) => e // Triggered when "isShow" is set to false return < > div </ > div Besides that, you can also handle the visibility of your component via React or like for the . animation events translation events what I did demo app Build Your Customized Hook Are you tired to write the same code over and over again? It's time to build your own hook based on react-cool-portal then use it wherever you want. { useCallback } ; usePortal ; useModal = { { Portal, isShow, ...rest } = usePortal({
    ...options, : , : ,
  }); Modal = useCallback( ( <div className={`modal${isShow ? " modal-open" : ""}`} tabIndex={-1}>
          {children}
        </div> ),
    [isShow]
  ); { Modal, isShow, ...rest };
}; App = { { Modal, show, hide } = useModal(); ( <button onClick={show}>Open Modal</button> <button onClick={hide}>Close Modal</button> <Modal>
        <div
          className="modal-dialog"
          role="dialog"
          aria-labelledby="modal-label"
          aria-modal="true"
        >
          <div className="modal-header">
            <h5 id="modal-label" className="modal-title">
              Modal title
            </h5>
          </div>
          <div className="modal-body">
            <p>Modal body text goes here.</p>
          </div>
        </div>
      </Modal> );
}; import from "react" import from "react-cool-portal" // Customize your hook based on react-cool-portal const ( ) => options = {} const defaultShow false internalShowHide false const ( ) => { children } < > Portal </ > Portal return // Use it wherever you want const => () const return < > div </ > div Thanks for reading, for more usage details checkout the project's GitHub page: https://github.com/wellyshen/react-cool-portal You can also install this package is distributed via . npm $ yarn add react-cool-portal
# or
$ npm install --save react-cool-portal Stay Tuned!

Super

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

✨ How To Build Your UI Components with React Portals Super Easy

Too Long; Didn't Read

Company Mentioned

welly

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

✨ How To Build Your UI Components with React Portals Super Easy

Too Long; Didn't Read

Company Mentioned

welly

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES