DOM & Layout·loomora → useFloatPos

useFloatPos

Dynamically checks remaining viewport space above, below, and towards document edges to invert floating placement (e.g. flipping from bottom to top when near the screen edge).

Interactive live playground

Interact with the hook state and inspect computed return values in real time.

Live

Floating Box

pos: bottom-end

Float Orientation

Vertical Positionbottom

Horizontal Positionend

How to call

Import directly from the Loomora root package in any React client component.

import { useRef } from 'react'
import { useFloatPos } from 'loomora'

export function FloatingTooltip({ open }: { open: boolean }) {
  const anchorRef = useRef<HTMLButtonElement>(null)
  const menuRef = useRef<HTMLDivElement>(null)

  const pos = useFloatPos(open, anchorRef, menuRef, { v: 'bottom', h: 'end' })

  return (
    <div>
      <button ref={anchorRef}>Hover me</button>
      {open && (
        <div ref={menuRef} className={`pos-${pos.v}-${pos.h}`}>
          Tooltip content
        </div>
      )}
    </div>
  )
}

Return values & methods

API signatures and utilities returned by this hook.

2 methods

Method / Prop	Type	Description
v	'top' \| 'bottom'	Computed vertical orientation based on available viewport space.
h	'start' \| 'end'	Computed horizontal orientation respecting RTL and screen edges.

← All hooks map Back to live example ↑