Svelte use:action for element position notifications using IntersectionObserver.
Small. Efficient. SSR Friendly.
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:
This package is simple, fast and efficient. It is only 372 bytes minified, 243 bytes minified and gzipped.
Import using your package manager of choice, e.g.:
pnpm i svelte-intersection-observer-action
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
)
<script lang="ts">
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 }
</script>
<div use:intersect={options}>
{ratio}
</div>
use:action
Import inside your use:action
module:
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:
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()
},
}
}