useElementVisibility

v0.0.15testeddemo

Track whether an element is visible within the viewport (or a custom scroll root), backed by `IntersectionObserver`.

Examples

const isVisible = useElementVisibility(el);

const { isVisible, stop } = useElementVisibility(el, { controls: true, once: true });

Demo

Loading demo…

Signatures

export function useElementVisibility(
  target: MaybeComputedElementRef,
  options?: UseElementVisibilityOptions<false>,
): UseElementVisibilityReturn<false>;

export function useElementVisibility(
  target: MaybeComputedElementRef,
  options: UseElementVisibilityOptions<true>,
): UseElementVisibilityReturn<true>;

Parameters

Parameter	Type	Default	Description
`target`	`MaybeComputedElementRef`	—	Element to track
`options`?	`UseElementVisibilityOptions<boolean>`	`{}`	Options

Returns

ShallowRef<boolean> | UseElementVisibilityReturnWithControlsVisibility ref, or `{ isVisible, ...controls }` when `controls` is `true`