Creating portals with custom usePortal hook

Why?

Sometimes you want to render components outside

div

with

id="root"

. It may happen when you're working on some components that use

z-index

absolute/fixed/static

positions in css - these could be modals, alerts or prompts.

This can be achieved by usage of

React.createPortal()

. Remember

don't repeat yourself

. Don't use this API everywhere and stop copying the logic all the time. It's a good idea to create a hook for that.

Usage

The hook created by us can be used in the following way:

Implementation

Check implementation below to understand the power of encapsulation.