@domphy/floating

domphy.com · Docs · npm

Anchor positioning for tooltips, popovers, dropdowns, and menus — computePosition, autoUpdate, and the offset / flip / shift / arrow / size middleware.

This package is a 1-1 vendor of floating-ui (@floating-ui/dom + @floating-ui/core + @floating-ui/utils, MIT © Floating UI contributors), bundled into a single zero-dependency package. The source tracks upstream byte-for-byte (cross-package imports are resolved at build time) except for a small, documented deviation list — see UPSTREAM.md for the pinned upstream versions (@floating-ui/[email protected], @floating-ui/[email protected]) and the deviations — so the entire Floating UI reference applies as-is. It exists so @domphy/ui has no external runtime dependency — Domphy's overlay patches (tooltip, popover, selectBox, combobox) use it internally.

Install

npm install @domphy/floating

Zero dependencies. Same API surface as @floating-ui/dom.

Usage

import { computePosition, autoUpdate, offset, flip, shift } from "@domphy/floating"

const cleanup = autoUpdate(referenceEl, floatingEl, async () => {
  const { x, y } = await computePosition(referenceEl, floatingEl, {
    placement: "bottom",
    middleware: [offset(8), flip(), shift({ padding: 8 })],
  })
  Object.assign(floatingEl.style, { left: `${x}px`, top: `${y}px` })
})
// later: cleanup()

Stateful manager — createFloating

createFloating wraps computePosition + autoUpdate into a stateful handle so callers don't have to manage the cleanup function or re-implement the update loop themselves — the Popper.js createPopper() equivalent:

import { createFloating, offset, flip, shift } from "@domphy/floating"

const handle = createFloating({
  placement: "bottom",
  middleware: [offset(8), flip(), shift()],
  strategy: "fixed",
})

// Once both elements are in the DOM (e.g. from a Domphy `_onMount` hook):
handle.connect(referenceEl, floatingEl)
handle.onUpdate(({ x, y }) => {
  Object.assign(floatingEl.style, { left: `${x}px`, top: `${y}px` })
})

// When the floating element is removed (e.g. `_onBeforeRemove`):
handle.disconnect()

See docs/floating/auto-update for the full createFloating API.

See floating-ui.com for the full middleware and platform API — it is identical.