useComponentObserver

Options

Property	Type	Description	Default Value
root	HTMLElement	MDN root	undefined
rootMargin	String	MDN rootMargin	'0px'
threshold	Array	MDN threshold	[0]
trackVisibility	Boolean	MDN trackVisibility	false
delay	Number	MDN delay	0

Return

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

Example

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

<script setup>
import useComponentObserver from '#speedkit/composables/componentObserver';

const { el: target, inView } = useComponentObserver({
  trackVisibility: true,
  delay: 350
});

</script>