svelte-intersect

⚠️ deprecated, moved to @ryanatkn/fuz/intersect.js

a Svelte action for IntersectionObserver

• demo: ryanatkn.github.io/svelte-intersect
• npm: svelte-intersect
• Svelte repl
• todo
  • figure out how to make the el type inferred/generic
  • does the API need any tweaks? (the negative count never disconnecting may be undesirable)

Usage

npm i -D svelte-intersect

import {intersect} from 'svelte-intersect';

intersect is a Svelte action that calls onintersect when el enters or leaves the viewport:

<div use:intersect={{
  onintersect: ({intersecting, intersections, el, observer, disconnect}) => void,
  ondisconnect: ({intersecting, intersections, el, observer}) => void,
  count: 1, // 1 is like 'once', 0 disables, <0 or undefined is infinite
  options: {threshold, root, rootMagin}, // `IntersectionObserver` options
}}>

All options are optional.

export interface Intersect_Params {
    /**
     * Called when the element enters or leaves the viewport until disconnected.
     */
    onintersect?: On_Intersect;
    /**
     * Called when the action's observer is disconnected,
     * either by the user calling disconnect or the action being destroyed.
     */
    ondisconnect?: On_Disconnect;
    /**
     * A value of `1` disconnects after `el` enters and leaves the viewport one time,
     * similar to 'once' for an event.
     * `0` disables and `undefined` or a negative number like `-1` never disconnects.
     */
    count?: number;
    /**
     * Same as the `options` param to
     * [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options)
     */
    options?: IntersectionObserverInit;
}

export interface On_Intersect {
    (state: Intersect_State): void;
}

export interface Intersect_State {
    intersecting: boolean;
    intersections: number;
    el: HTMLElement | SVGElement;
    observer: IntersectionObserver;
    disconnect: () => void;
}

export interface On_Disconnect {
    (state: Disconnect_State): void;
}

export interface Disconnect_State {
    intersecting: boolean;
    intersections: number;
    el: HTMLElement | SVGElement;
    observer: IntersectionObserver;
}

For more see the IntersectionObserver docs on MDN, the demo at ryanatkn.github.io/svelte-intersect, and the implementation.

License

MIT