Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | /**
* Delay configuration for hover events.
* Can be a single number for both enter/leave, or an object for separate values.
*
* @example
* ```tsx
* // Same delay for enter and leave
* const delay: HoverDelayConfig = 200;
*
* // Different delays
* const delay: HoverDelayConfig = { enter: 100, leave: 500 };
* ```
*/
export type HoverDelayConfig =
| number
| {
/**
* Delay in milliseconds before isHovered becomes true
* @default 0
*/
enter?: number;
/**
* Delay in milliseconds before isHovered becomes false
* @default 0
*/
leave?: number;
};
/**
* Callback function for hover state changes
*
* @param isHovered - The new hover state
* @param event - The triggering mouse or touch event (undefined for initial state)
*/
export type OnHoverChangeCallback = (
isHovered: boolean,
event?: MouseEvent | TouchEvent
) => void;
/**
* Options for configuring the useHover hook
*/
export interface UseHoverOptions {
/**
* Whether the hover detection is enabled.
* When false, isHovered will always be false and no event listeners are attached.
* @default true
*/
enabled?: boolean;
/**
* Delay in milliseconds before hover state changes.
* Can be a single number for both enter/leave, or an object for separate values.
* @default 0
*
* @example
* ```tsx
* // Same delay for enter and leave
* useHover({ delay: 200 })
*
* // Different delays - useful for tooltips
* useHover({ delay: { enter: 500, leave: 100 } })
* ```
*/
delay?: HoverDelayConfig;
/**
* Callback fired when hover state changes.
* Called with the new hover state and the triggering event.
*
* @example
* ```tsx
* useHover({
* onChange: (isHovered, event) => {
* if (isHovered) {
* analytics.track('element_hovered');
* }
* }
* })
* ```
*/
onChange?: OnHoverChangeCallback;
/**
* Initial hover state.
* Useful for SSR to prevent hydration mismatches.
* @default false
*/
initialHovered?: boolean;
/**
* Whether to detect touch events (for hybrid devices).
* When true, touchstart/touchend events also trigger hover state.
* @default false
*/
detectTouch?: boolean;
}
/**
* Return type for the useHover hook.
* Supports both object destructuring and tuple destructuring via Symbol.iterator.
*
* @template T - The type of element the ref will be attached to (HTMLElement or SVGElement)
*
* @example
* ```tsx
* // Object destructuring
* const { ref, isHovered } = useHover<HTMLDivElement>();
*
* // Tuple destructuring
* const [ref, isHovered] = useHover<HTMLDivElement>();
*
* // SVG elements
* const { ref, isHovered } = useHover<SVGSVGElement>();
* ```
*/
export interface UseHoverReturn<T extends Element = HTMLElement> {
/**
* Callback ref to attach to the target element.
* Can be passed directly to the ref prop of any element.
*
* @example
* ```tsx
* const { ref, isHovered } = useHover();
* return <div ref={ref}>{isHovered ? 'Hovering!' : 'Hover me'}</div>;
* ```
*/
ref: (node: T | null) => void;
/**
* Boolean indicating whether the element is currently being hovered.
*/
isHovered: boolean;
/**
* Iterator for tuple destructuring support.
* Allows `const [ref, isHovered] = useHover()` syntax.
*/
[Symbol.iterator](): Iterator<((node: T | null) => void) | boolean>;
}
|