IntersectionObserverTarget

import IntersectionObserverTarget from "@wikicasa-dev/components/generic/IntersectionObserver/v2/IntersectionObserverTarget";

One observed element inside an IntersectionObserverProvider. It wraps its slot in a <div> that the provider's observer watches, and passes { isVisible } to the slot. See IntersectionObserverProvider for the full pattern (lazy section and infinite scroll).

• observe-once (default true): once the element has been seen, observation stops, isVisible stays true and the wrapper <div> is removed (the slot renders directly in its place).
• :observe-once="false": the wrapper stays and isVisible follows the element in and out of the viewport. Use for sentinels and "is this on screen right now" logic.

#Usage

<script setup lang="ts">
import IntersectionObserverProvider from "@wikicasa-dev/components/generic/IntersectionObserver/v2/IntersectionObserverProvider";
import IntersectionObserverTarget from "@wikicasa-dev/components/generic/IntersectionObserver/v2/IntersectionObserverTarget";
</script>

<template>
  <IntersectionObserverProvider>
    <IntersectionObserverTarget v-slot="{ isVisible }">
      <img v-if="isVisible" src="/img/mappa-quartiere.png" alt="Mappa del quartiere Prati, Roma" width="600" height="300" />
      <div v-else style="width: 600px; height: 300px; background: #e9effe" />
    </IntersectionObserverTarget>
  </IntersectionObserverProvider>
</template>

#Do / Don't

• Do use it only inside an IntersectionObserverProvider.
• Do give the not-visible branch a real size: an empty, zero-height wrapper makes layout jump when content appears.
• Don't rely on class/attributes set on the target with the default observe-once: they sit on the wrapper <div>, which disappears once the element is visible. Style your own slot content instead.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
observeOnce	boolean	true

Events

None.

v-model

None.

Slots

Name	Slot props
default	{ isVisible: boolean; }

Exposed (template ref)

None.