@asyarb/use-intersection-observer/dist/index.d.ts

An easy to use React hook wrapper around the IntersectionObserver API.

import { RefObject } from 'react';
/**
 * Hook parameters.
 */
interface UseIntersectionObserverProperties {
    /**
     * Ref object from `useRef`.
     */
    ref?: RefObject<Element> | null;
    /**
     * DOM element. E.g. from `querySelector()`
     */
    element?: Element | null | undefined;
    /**
     * Configuration options for the intersection observer
     * instance.
     */
    options?: IntersectionObserverOptions;
    /**
     * Callback to fire when the observed component or Element
     * comes into view.
     */
    callback?: (entry: IntersectionObserverEntry) => void;
}
/**
 * Intersection Observer configuratiopn options.
 */
interface IntersectionObserverOptions {
    /**
     * If `true`, check for intersection only once. Will
     * disconnect the IntersectionObserver instance after
     * intersection.
     */
    triggerOnce: boolean;
    /**
     * Number from 0 to 1 representing the percentage
     * of the element that needs to be visible to be
     * considered as visible. Can also be an array of
     * thresholds.
     */
    threshold: number | number[];
    /**
     * Element that is used as the viewport for checking visibility
     * of the provided `ref` or `element`.
     */
    root?: Element;
    /**
     * Margin around the root. Can have values similar to
     * the CSS margin property.
     */
    rootMargin?: string;
}
/**
 * Watch for the scrolling intersection of a React component or
 * Element.
 *
 * @param hookProperties - Configuration object for this hook.
 *
 * @returns A boolean representing if the observed component
 * or Element is in view.
 */
export declare const useIntersectionObserver: ({ ref, element, options, callback, }: UseIntersectionObserverProperties) => boolean;
export {};