Teleport

This is a component adapted to Vue <Teleport>, used to render a piece of UI into a target container outside the current component tree. It is commonly used in scenarios such as modals, notifications, and floating layers.

Basic Usage

Specify the target node (selector or element object) via to, and the child content will be teleported to the target position.

const [open, setOpen] = useState(false);

<Teleport to="body">{open ? <Modal onClose={() => setOpen(false)} /> : null}</Teleport>;

Disable Teleportation

When disabled is true, the content will be rendered in its original position without teleportation.

<Teleport to="body" disabled={isMobile}>
  <StatusBadge />
</Teleport>

Multiple Teleports Pointing to the Same Target

Multiple <Teleport> components can be attached to the same container, and their content will be appended in the order of rendering.

<div id="modals" />

<Teleport to="#modals">
  <div>Modal A</div>
</Teleport>

<Teleport to="#modals">
  <div>Modal B</div>
</Teleport>

API

Props

interface TeleportProps extends PropsWithChildren {
  /**
   * Target container selector or target element.
   */
  to: string | HTMLElement;
  /**
   * When true, teleportation is disabled and content is rendered in place.
   */
  disabled?: boolean;
  /**
   * When true, teleportation is deferred until after mounting.
   */
  defer?: boolean;
}

Notes

• If the target pointed to by to does not exist, it will fall back to in-place rendering and output an error log.
• disabled and to can be dynamically switched, and the component will automatically recalculate the rendering position.
• defer is applicable to scenarios where the target node is created later than the current component.