azure-devops-ui/Components/Intersection/Intersection.Props.d.ts

React components for building web UI in Azure DevOps

/**
 * An intersection component uses an IntersectionObserver to watch for changes in the
 * visibility of given elements that are observed within the rootElement. When changes
 * occure the onIntersect method is called with a set of entries that describe the
 * change in visibility. It will also call the onIntersect with an empty set of
 * entries if the rootElement is scrolled.
 *
 * NOTE: The root and observation elements can't be changed after the initial render.
 * In the case that is needed a new key should be supplied to force a new component.
 */
export interface IIntersectionProps {
    /**
     * If the caller wants to observe a single static element within the intersection
     * that is available when the intersection mounts, it can supply an observationElement.
     */
    observationElement?: HTMLElement | string | (() => HTMLElement | null);
    /**
     * onIntersect is called in two cases and denotes a change in the rootElements
     * visible viewport.
     *
     * 1) When the rootElement is scrolled onIntersect is called with a empty
     * array of entries. No intersections are calculated.
     * 2) When the underlying IntersectionObserver fires the intersection events.
     * These event describe the changes in visibility of elements being observed
     * through the IntersectionContext.
     */
    onIntersect?: (entries: IntersectionObserverEntry[]) => void;
    /**
     * The parent element that contains the elements being observed and has its
     * onScroll events forwarded.
     */
    rootElement?: HTMLElement | string | (() => HTMLElement | null);
    /**
     * An additional amount number of pixels that should be considered within the
     * viewport of the rootElement. This is used to enlarge the visibility range
     * making intersection occur when elements are still outside the visible view.
     */
    rootMargin?: number;
    /**
     * Threshold define the point at which the change is important. By default the
     * threshold are set to a 1% change in visibility. If the caller wants to know
     * about specific points only they can supply a custom set of thresholds.
     */
    threshold?: number[];
}