@y14e/portal
v1.2.8
Published
Lightweight DOM portal (teleport) utility with fully focus management
Maintainers
y14eReadme
Portal
Lightweight DOM portal (teleport) utility with fully focus management. Designed for accessible dialogs, menus, overlays, popovers.
[!NOTE] Focus traversal works across portals using invisible sentinels and composed-tree-aware focus detection powered by Power Focusable.
Install
npm i @y14e/portal// npm
import { createPortal } from '@y14e/portal';
// CDNs
import { createPortal } from 'https://esm.sh/@y14e/portal'
// or
import { createPortal } from 'https://cdn.jsdelivr.net/npm/@y14e/portal/+esm';
// or
import { createPortal } from 'https://unpkg.com/@y14e/portal/dist/index.js';📦 APIs
createPortal
Creates a portal and preserves keyboard focus order between the original DOM and the portal.
const cleanup = createPortal(host, container);
// => () => void
//
// host: Element
// container (optional): Element (default: <body>)Demo
https://y14e.github.io/portal/