🔰 Creating portals with custom usePortal hook

Intro

We'll use native React portal API to move any component outside of the root div. Later, we'll wrap it with a custom hook to avoid z-index problems.

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 or 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.