svelte-intersection-observer-action

Svelte use:action for element position notifications using IntersectionObserver.

Small. Efficient. SSR Friendly.

Purpose

You need to know when an Element intersects another, as efficiently as possible, adding as few bytes to your project as possible.

The existing packages I looked at all had one or more issues:

• Not SSR compatible. Likely developed before SvelteKit, when Svelte was primarily used for client-side components.
• Used a Svelte Component as a wrapper. This adds unnecessary overhead and bytes to your bundle.
• Dispatch events. IMO this is also unnecessary and wasted bytes. A callback passed in to an action is simpler and more efficient.
• Create an IntersectionObserver instance per element. Slightly less efficient and a potential waste of runtime resources, especially if many elements need to be observed, vs using a single observer as intended.
• Only provide simplified event information, not the complete set of IntersectionObserverEntry properties.
• Lack of TypeScript support.

This package is simple, fast and efficient. It is only 372 bytes minified, 243 bytes minified and gzipped.

Usage

Import using your package manager of choice, e.g.:

pnpm i svelte-intersection-observer-action

Within a Svelte Component

Import and apply to your HTML element. Provide the callback function that will be called with the IntersectionObserverEntry object. Optionally, provide additional IntersectionObserver options (root, rootMargin, and thresholds)

1<script lang="ts">
2  import { intersect } from 'svelte-intersection-observer-action'
3
4  let ratio = 0
5  function callback(entry: IntersectionObserverEntry) {
6    ratio = entry.intersectionRatio
7  }
8
9  // important: re-use options object for caching
10  const options = { callback }
11</script>
12
13<div use:intersect={options}>
14  {ratio}
15</div>

Within another Svelte use:action

Import inside your use:action module:

1import { intersect } from 'svelte-intersection-observer-action'

Apply to the element passed in to your use:action and call the destroy method when your action is destroyed:

1type Render = (ctx: CanvasRenderingContext2D) => void
2
3export function lazyload(image: HTMLImageElement) {
4  // use intersect action to watch element in viewport
5  const callback = entry => loadImage()
6  const intersectManager = intersect(image, { callback })
7
8  // rest of use:action implementation
9  function loadImage() {}
10
11  return {
12    destroy() {
13      // remember to call destroy when this action is destroyed
14      intersectManager.destroy()
15    },
16  }
17}