@supunlakmal/hooks/dist/types/hooks/user-interface-dom/useVisibility.d.ts

A collection of reusable React hooks

import { RefObject } from 'react';
interface UseVisibilityOptions extends IntersectionObserverInit {
    initialIsVisible?: boolean;
    disconnectOnVisible?: boolean;
}
/**
 * Custom hook to track whether an element is visible in the viewport or a scrollable ancestor.
 * Uses the IntersectionObserver API.
 *
 * @template T - The type of the element being observed.
 * @param {RefObject<T>} elementRef - A ref attached to the element to observe.
 * @param {UseVisibilityOptions} [options] - Configuration options for the IntersectionObserver.
 * @param {Element | null} [options.root=null] - The element that is used as the viewport for checking visibility. Defaults to the browser viewport.
 * @param {string} [options.rootMargin='0px'] - Margin around the root. Can have values similar to the CSS margin property.
 * @param {number | number[]} [options.threshold=0] - A single number or an array of numbers indicating the percentage of the target's visibility the observer triggers at.
 * @param {boolean} [options.initialIsVisible=false] - Initial state before the observer runs.
 * @param {boolean} [options.disconnectOnVisible=false] - If true, the observer disconnects after the element first becomes visible.
 * @returns {boolean} True if the element is currently intersecting/visible based on the options, false otherwise.
 */
export declare const useVisibility: <T extends Element>(elementRef: RefObject<T>, { initialIsVisible, disconnectOnVisible, ...observerOptions }?: UseVisibilityOptions) => boolean;
export {};