@gluonjs/core / src / createResizeObserver

Function: createResizeObserver()

createResizeObserver<ElementType>(options?, onEntries?): PlatformObserverHandle<ElementType, ResizeObserverEntry>

Creates a reactive, callback-ref-owned ResizeObserver.

Type Parameters

ElementType

ElementType extends Element = Element

Parameters

options?

ResizeObserverOptions = {}

onEntries?

(entries) => void

Returns

PlatformObserverHandle<ElementType, ResizeObserverEntry>

Example

Measure an owned product surface through a realm-correct ResizeObserver that disconnects when its callback ref clears:

import {
  createIntersectionObserver,
  createMutationObserver,
  createResizeObserver,
  html,
  type PlatformObserverHandle,
} from '@gluonjs/core';

const visibility: PlatformObserverHandle<HTMLAnchorElement, IntersectionObserverEntry> =
  createIntersectionObserver({ rootMargin: '240px' }, (entries) => {
    if (entries.some((entry) => entry.isIntersecting)) visibility.stop();
  });
const size = createResizeObserver<HTMLAnchorElement>({ box: 'border-box' });
const changes = createMutationObserver<HTMLAnchorElement>({ attributes: true });

const card = html`<a ...=${{ ref: visibility.ref }} href="/products/orbit-lamp">Orbit Lamp</a>`;
console.log(card, size.entries.value, changes.supported.value);