@sv-use/core/dist/observe-intersection/index.svelte.d.ts

A collection of Svelte 5 utilities.

import { type ConfigurableWindow } from '../__internal__/configurable.js';
import type { Getter } from '../__internal__/types.js';
export interface ObserveIntersectionOptions extends ConfigurableWindow {
    /**
     * Whether to automatically cleanup the observer or not.
     *
     * If set to `true`, it must run in the component initialization lifecycle.
     * @default true
     */
    autoCleanup?: boolean;
    /**
     * Whether to start the IntersectionObserver on creation or not.
     * @default true
     */
    immediate?: boolean;
    /**
     * The element or document whose bounds are used as the bounding box when testing for intersection.
     * @default document
     */
    root?: HTMLElement | Getter<HTMLElement> | Document;
    /**
     * A string which specifies a set of offsets to add to the root's bounding box when calculating intersections.
     * @default '0px'
     */
    rootMargin?: string;
    /**
     * Either a single number or an array of numbers between 0.0 and 1.
     * @default 0
     */
    threshold?: number | number[];
}
export interface ObserveIntersectionReturn {
    /** Whether the {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API | `Intersection Observer API`} is supported or not. */
    readonly isSupported: boolean;
    /** Whether the function is currently observing the targets or not. */
    readonly isActive: boolean;
    /** Resumes the observer. */
    resume: () => void;
    /** Pauses the observer. It can also be used to cleanup the observer. */
    pause: () => void;
    /**
     * Cleans up the observer.
     * @note Alias for `pause`.
     */
    cleanup: () => void;
}
/**
 * Runs a callback when the target is visible on the screen.
 * @param target The target to observe.
 * @param callback The callback to run when the targets are visible on screen.
 * @param options Additional options to customize the behavior.
 * @see https://svelte-librarian.github.io/sv-use/docs/core/observe-intersection
 */
export declare function observeIntersection(target: Getter<HTMLElement | null | undefined>, callback: IntersectionObserverCallback, options: ObserveIntersectionOptions): ObserveIntersectionReturn;
/**
 * Runs a callback when the targets are visible on the screen.
 * @param targets The targets to observe.
 * @param callback The callback to run when the targets are visible on screen.
 * @param options Additional options to customize the behavior.
 * @see https://svelte-librarian.github.io/sv-use/docs/core/observe-intersection
 */
export declare function observeIntersection(targets: Array<Getter<HTMLElement | null | undefined>>, callback: IntersectionObserverCallback, options: ObserveIntersectionOptions): ObserveIntersectionReturn;