usePopover
Позиционирование и поведение попапов на floating-ui.
Хук, на котором построены Popover, Tooltip, ConfirmPopover, Select и Search. Он вычисляет положение попапа относительно триггера (с переворотом и сдвигом у края экрана), закрывает его по клику снаружи и Escape и выдаёт пропсы с обработчиками и ARIA-атрибутами. Используйте его, когда нужен собственный попап, которого нет среди готовых компонентов. openOn выбирает способ открытия: click, hover (с учётом фокуса) или manual.
Использование
'use client';
import { usePopover } from '@prosazhin/pbcomponents';
function Example() {
const { open, refs, floatingStyles, getReferenceProps, getFloatingProps } = usePopover({
placement: 'bottom-start',
openOn: 'click',
role: 'dialog',
});
return (
<>
<button
ref={refs.setReference}
{...getReferenceProps()}
>
Filters
</button>
{open && (
<div
ref={refs.setFloating}
style={floatingStyles}
{...getFloatingProps()}
>
Popup content
</div>
)}
</>
);
}API хука
Параметры
| Параметр | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
open? | boolean | Внешнее состояние открытия. | — |
defaultOpen? | boolean | Начальное внутреннее состояние. | — |
onOpenChange? | (open: boolean) => void | Вызывается при открытии и закрытии. | — |
placement? | PopoverPlacement | Сторона и выравнивание относительно триггера. По умолчанию bottom-start. | — |
openOn? | 'click' | 'hover' | 'manual' | Чем открывается попап. По умолчанию click. | — |
hoverDelay? | number | Задержка открытия при openOn: hover, в миллисекундах. | — |
offset? | number | Отступ от триггера в пикселях. По умолчанию 6. | — |
matchTriggerWidth? | boolean | Ширина попапа равна ширине триггера. | — |
arrowRef? | RefObject<Element | null> | Ref стрелки для её позиционирования. | — |
role? | 'dialog' | 'menu' | 'listbox' | 'tooltip' | ARIA-роль попапа. | — |
disabled? | boolean | Отключает открытие. | — |
Возвращает
| Значение | Тип / варианты | Назначение |
|---|---|---|
open | boolean | Открыт ли попап. |
setOpen | (open: boolean) => void | Открывает или закрывает попап. |
refs | { setReference, setFloating, … } | Ref-колбэки для триггера и попапа. |
context | FloatingContext | Контекст floating-ui, например для FloatingArrow. |
floatingStyles | CSSProperties | Стили позиционирования попапа. |
side | 'top' | 'right' | 'bottom' | 'left' | Фактическая сторона после переворота. |
getReferenceProps | (props?) => Record<string, unknown> | Пропсы для триггера (обработчики и ARIA). |
getFloatingProps | (props?) => Record<string, unknown> | Пропсы для попапа. |