useBoosterComponentObserver

Types

declare function useBoosterComponentObserver(options?: ObservableOptions): {
    el: Ref<HTMLElement | undefined, HTMLElement | undefined>;
    inView: Ref<boolean, boolean>;
};

declare interface ObservableOptions = {
  root?: HTMLElement;
  rootMargin?: string;
  threshold?: number | number[];
  trackVisibility?: boolean;
  delay?: number;
};

Options

Property	Description	Default Value
root	MDN root	undefined
rootMargin	MDN rootMargin	'0px'
threshold	MDN threshold	[0]
trackVisibility	MDN trackVisibility	false
delay	MDN delay	0

Return

Property	Description
el	Component ref for tag referencing.
inView	Reference that indicates whether referenced element is visible.

Example

<template>
  <div ref="target" :class="{visible: inView}">
    …
  </div>
</template>

<script setup>
const { el: target, inView } = useBoosterComponentObserver({
  trackVisibility: true,
  delay: 350
});
</script>