Portal

Purpose

Portal provides shared utility behavior for design-system usage.

Import


import { Portal } from "@tesseract-nexus/tesserix-ui"

API reference


import * as React from "react"
import { createPortal } from "react-dom"
 
export interface PortalProps {
  /**
   * The children to render in the portal
   */
  children: React.ReactNode
  /**
   * The container element to render into (defaults to document.body)
   */
  container?: HTMLElement | null
}
 
/**
 * Component that renders children into a different part of the DOM tree
 */
export function Portal({ children, container }: PortalProps) {
  const [mounted, setMounted] = React.useState(false)
 
  React.useEffect(() => {
    setMounted(true)
    return () => setMounted(false)
  }, [])
 
  if (!mounted) {
    return null
  }
 
  return createPortal(children, container || document.body)
}

Do / Don’t

Do


// Use shared utility in app architecture for consistency

Don’t


// Avoid duplicating equivalent utility behavior in feature code

Token / Theming Mapping

Utility UI should inherit system tokens: —primary, —foreground, —muted, —radius, —ring.
Theming/loading utilities should rely on provider config and CSS variables.

Interaction Test Checklist

Functional behavior contract verification.
Integration verification in at least one consuming screen.
Accessibility verification for focus/visibility semantics where relevant.
Error/fallback behavior verification.