<in-view> slot-scoped component

[clementroche]

Enhancement proposal

Here is how <in-view> component can work using scoped slot

in-view.vue

<template>
  <component
    :is="tag"
    v-observe-visibility="{
      callback: (isVisible) => {
        inView = isVisible
      },
      once: once,
      intersection: {
        rootMargin: rootMargin,
        threshold: threshold
      }
    }"
    class="inView"
  >
    <slot :inView="inView" />
  </component>
</template>

<script>
export default {
  props: {
    tag: {
      type: String,
      default: 'div'
    },
    once: {
      type: Boolean,
      default: false
    },
    threshold: {
      type: Number,
      default: 0
    },
    rootMargin: {
      type: String,
      default: '0px 0px 0px 0px'
    }
  },
  data() {
    return {
      inView: undefined
    }
  }
}
</script>

example of use :

<in-view :tag="'section'" :once="true" :threshold="0.2" v-slot="{inView}">
  <div v-if="inView" />
</in-view>

it can be useful to resolve #198

[Akryum]

Nice component! 👌