25 lines
857 B
TypeScript
25 lines
857 B
TypeScript
import { useCallback, useLayoutEffect, useState } from 'react';
|
|
import type React from 'react';
|
|
|
|
export function useDropdownPosition(anchorRef: React.RefObject<HTMLElement | null>, open: boolean) {
|
|
const [pos, setPos] = useState<{ top: number; left: number; width: number } | null>(null);
|
|
|
|
const update = useCallback(() => {
|
|
if (!anchorRef.current) return;
|
|
const rect = anchorRef.current.getBoundingClientRect();
|
|
setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
|
|
}, [anchorRef]);
|
|
|
|
useLayoutEffect(() => {
|
|
if (!open) return;
|
|
update();
|
|
window.addEventListener('scroll', update, true);
|
|
window.addEventListener('resize', update);
|
|
return () => {
|
|
window.removeEventListener('scroll', update, true);
|
|
window.removeEventListener('resize', update);
|
|
};
|
|
}, [open, update]);
|
|
|
|
return pos;
|
|
}
|