LayerProvider

LayerProvider creates a scoped portal root for floating @murasaki-io/react98 UI such as submenus, context menus, tooltips, and windows that do not receive an explicit portal container.

It keeps menus and popups inside your desktop/shell container instead of leaking them to document.body. Without it, floating layers fall back to document.body, which breaks overflow: hidden shells (menus get clipped or escape the surface), loses z-index / stacking-context isolation, and lets popups render outside the very container they belong to.

Use it at an app shell or framed-surface seam when library popups should stay inside the same stacking context as the surface that triggered them.

// ❌ Without LayerProvider: a tooltip/submenu inside this shell portals to
// document.body and escapes the `overflow-hidden` + `isolate` surface.
function DesktopWithoutLayer() {
  return (
    <div className="relative isolate overflow-hidden">
      <Desktop />
    </div>
  )
}
 
// ✅ With LayerProvider: floating layers render into the shell's local root.
function DesktopWithLayer() {
  return (
    <div className="relative isolate overflow-hidden">
      <LayerProvider>
        <Desktop />
      </LayerProvider>
    </div>
  )
}

Props

Other div props are passed to the generated local layer root when container is omitted.

Usage

import { LayerProvider } from '@murasaki-io/react98'
 
export function DesktopShell() {
  return (
    <div className="relative isolate overflow-hidden">
      <LayerProvider>
        <Desktop />
        <Taskbar />
      </LayerProvider>
    </div>
  )
}

Floating library content still positions against the viewport or the component’s own boundary props. The layer root controls paint ownership, not placement math.

ARIA

LayerProvider does not add ARIA roles. Portaled children keep their own semantics.

Keyboard

LayerProvider does not add keyboard behavior. Dismissal, focus, and navigation stay owned by the floating component.

SSR

Without a provider, floating layers fall back to document.body after mount. With a provider, layers wait for the local portal root to mount before rendering.