useHoverControllable
Tracks hover as controlled or internal state.
Tracks hover as controlled or internal state.
Usage
'use client';
import { useHoverControllable } from '@prosazhin/pbcomponents';
function Example() {
const [hovered, , hoverRef] = useHoverControllable<HTMLButtonElement>({ defaultValue: false });
return <button ref={hoverRef}>{hovered ? 'Hovered' : 'Idle'}</button>;
}Hook API
Parameters
| Parameter | Type / variants | Purpose | Default |
|---|---|---|---|
ref? | RefObject<T | null> | Existing ref for the element to observe. | — |
value? | boolean | External hover state. | — |
defaultValue? | boolean | Initial internal state. | — |
onChange? | (value: boolean) => void | Called when the hover state changes. | — |
enabled? | boolean | Enables hover tracking. | — |
Returns
| Value | Type / variants | Purpose |
|---|---|---|
[0] hovered | boolean | Current hover state. |
[1] setHovered | (value: boolean) => void | Changes the hover state. |
[2] hoverRef | (node: T | null) => void | Callback ref for the observed element. |