NIPEOpen Source

Project detail

React Anchored Layer

Alpha

Anchored floating layers for React that keep arbitrary portal content aligned through scroll, resize, and layout changes.

Overview

Anchored floating layers for React that keep arbitrary portal content aligned through scroll, resize, and layout changes.

Why it exists

It exists to keep arbitrary portal content aligned with an anchor while the application retains ownership of interaction and accessibility semantics.

Source

Capabilities

  • Portal and anchor tracking

    Renders arbitrary content through a portal and keeps it aligned with its anchor through scrolling, resizing, and layout changes.

    Source

  • Collision and measurement ownership

    Owns positioning, portal placement, measurement, collision handling, and first-position visibility.

    Source

  • SSR-safe import

    Module import and server rendering are safe without DOM globals; portal content is established after mounting on the client.

    Source

Limitations

Application-owned interaction semantics

Applications own dismissal, focus, keyboard selection, request state, and ARIA semantics, including dropdown, combobox, menu, and tooltip behavior.

Source

Example

Example source
import { AnchoredLayer } from '@nipe-solutions/react-anchored-layer'
import '@nipe-solutions/react-anchored-layer/core.css'

;<AnchoredLayer.Root open={open} onOpenChange={setOpen}>
  <AnchoredLayer.Anchor asChild>
    <input aria-controls="address-results" aria-expanded={open} />
  </AnchoredLayer.Anchor>
  <AnchoredLayer.Content
    id="address-results"
    placement="bottom-start"
    offset={6}
    matchAnchorWidth
  >
    {results}
  </AnchoredLayer.Content>
</AnchoredLayer.Root>