https://github.com/captaincodeman/svelte-intersection-observer-action

Svelte Action for Intersection Observer
https://github.com/captaincodeman/svelte-intersection-observer-action

action intersection-observer svelte

Last synced: about 2 months ago
JSON representation

Svelte Action for Intersection Observer

• Host: GitHub
• URL: https://github.com/captaincodeman/svelte-intersection-observer-action
• Owner: CaptainCodeman
• Created: 2023-02-16T01:11:44.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-08-28T21:35:47.000Z (4 months ago)
• Last Synced: 2024-09-29T05:41:36.455Z (3 months ago)
• Topics: action, intersection-observer, svelte
• Language: TypeScript
• Homepage: https://captaincodeman.github.io/svelte-intersection-observer-action/
• Size: 141 KB
• Stars: 19
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).

- 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`)

```svelte

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

  let ratio = 0

  function callback(entry: IntersectionObserverEntry) {

    ratio = entry.intersectionRatio

  }

  // important: re-use options object for caching

  const options = { callback }



  {ratio}



```


### Within another Svelte `use:action`

Import inside your `use:action` module:

```ts

import { 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:

```ts

type Render = (ctx: CanvasRenderingContext2D) => void

export function lazyload(image: HTMLImageElement) {

  // use intersect action to watch element in viewport

  const callback = entry => loadImage()

  const intersectManager = intersect(image, { callback })

  // rest of use:action implementation

  function loadImage() {}

  return {

    destroy() {

      // remember to call destroy when this action is destroyed

      intersectManager.destroy()

    },

  }

}

```