UNPKG

@payfit/unity-components

Version:

72 lines (71 loc) 2.69 kB
import { RefObject } from 'react'; import { ScrollDetectionResult, ScrollDetectionStrategy } from '../utils/scroll-detection.js'; /** * Configuration options for the useHasScroll hook */ export interface UseHasScrollOptions { /** * Detection strategy to use: * - 'size': Compare scrollHeight/scrollWidth vs clientHeight/clientWidth (default) * Use when you need to detect actual scrollable content * - 'style': Check computed overflow styles (overflow, overflowX, overflowY) * Use when you need to check if element is configured for scrolling * - 'both': Element must satisfy both size and style conditions * Use for strict validation that element both has overflow style AND exceeds bounds * @default 'size' */ strategy?: ScrollDetectionStrategy; /** * Debounce delay in milliseconds for scroll detection updates * Higher values improve performance but reduce responsiveness * Set to 0 to disable debouncing * @default 100 */ debounceMs?: number; /** * Watch for DOM mutations (content changes) in the element * Disable for static content to improve performance * @default true */ watchMutations?: boolean; /** * Watch for element resize events * Disable if element size is fixed to improve performance * @default true */ watchResize?: boolean; } /** * React hook to detect if an element has scrollable content * This hook monitors a DOM element and determines whether it has scrollable content * using configurable detection strategies. It automatically updates when the element's * size changes or its content is modified. * @param {RefObject<HTMLElement>} ref - React ref to the element to monitor * @param {UseHasScrollOptions} options - Configuration options * @returns {ScrollDetectionResult} Current scroll detection state * @example * ```tsx * // Basic usage with default size-based detection * const containerRef = useRef<HTMLDivElement>(null); * const { hasVerticalScroll } = useHasScroll(containerRef); * ``` * @example * ```tsx * // Style-based detection * const { hasVerticalScroll } = useHasScroll(containerRef, { strategy: 'style' }); * ``` * @example * ```tsx * // Strict detection with both methods * const { hasVerticalScroll } = useHasScroll(containerRef, { strategy: 'both' }); * ``` * @example * ```tsx * // Performance optimized for static content * const scrollState = useHasScroll(containerRef, { * watchMutations: false, * debounceMs: 0 * }); * ``` */ export declare function useHasScroll(ref: RefObject<HTMLElement>, options?: UseHasScrollOptions): ScrollDetectionResult;