usePortal
The usePortal hook simplifies the creation and management of a DOM element that can be used as a portal target. Portals allow you to render components outside the normal DOM hierarchy, which is useful for UI elements like modals, tooltips, and dropdowns.
Usage
First, you need to import the usePortal hook from the kitchn package.
import { usePortal } from "kitchn";Example
Here is an example of how to use the usePortal hook to create a portal for rendering a modal:
Parameters
The usePortal hook accepts the following parameters:
| Name | Type | Description |
|---|---|---|
selectId | string | An optional ID used to uniquely identify the portal element. Defaults to a generated ID. |
getContainer | () => HTMLElement | An optional function that returns a container element where the portal will be appended. |
Return Value
The usePortal hook returns a tuple with the following elements:
| Name | Type | Description |
|---|---|---|
elSnapshot | HTMLElement | null | The DOM element created by the hook, or null if the hook is used in a non-browser environment. |