@fuz.dev/svelte_intersect v0.8.0

@fuz.dev/svelte_intersect

a Svelte action for IntersectionObserver

• demo: intersect.fuz.dev
• npm: @fuz.dev/svelte_intersect
• Svelte repl
• todo
  • figure out how to make the el type inferred/generic

Usage

npm i -D @fuz.dev/svelte_intersect

import {intersect} from '@fuz.dev/svelte_intersect';

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

<div use:intersect={(intersecting, el, disconnect) => /* ... */}>

export interface Intersect_Callback {
	(intersecting: boolean, el: HTMLElement | SVGElement, disconnect: () => void): void;
}

For more complex behavior:

<div use:intersect={{
  cb: (intersecting, el, disconnect) => /* ... */,
  count: 1, // 1 is like 'once', 0 disables, <0 infinite
  options: {threshold, root, rootMagin}, // IntersectionObserver options
}}>

For more see the IntersectionObserver docs on MDN and the demo at intersect.fuz.dev.

License

MIT