useFloating

A lightweight hook built on @floating-ui for positioning floating elements like tooltips, dropdowns, or popovers.

✅ Features

  • Auto-positioning
  • Collision detection
  • Flexible placements

📦 Usage

1import { useFloating } from './useFloating'
2
3const { refs, floatingStyles } = useFloating({ placement: 'bottom' })
4
5return (
6  <>
7    <button ref={refs.setReference}>Open</button>
8    <div ref={refs.setFloating} style={floatingStyles}>
9      I'm floating!
10    </div>
11  </>
12)

📋 Source Code

This is the full implementation of useFloating

1import { useEffect, useRef, useState } from 'react'
2
3export function useFloating() {
4  const ref = useRef<HTMLElement>(null)
5  const [position, setPosition] = useState({ top: 0, left: 0 })
6
7  const updatePosition = () => {
8    const el = ref.current
9    if (!el) return
10    const rect = el.getBoundingClientRect()
11    setPosition({
12      top: rect.bottom + window.scrollY,
13      left: rect.left + window.scrollX,
14    })
15  }
16
17  useEffect(() => {
18    updatePosition()
19    window.addEventListener('scroll', updatePosition, true)
20    return () => window.removeEventListener('scroll', updatePosition, true)
21  }, [])
22
23  return { ref, position }
24}
25