Skip to content

AbdallahHemdan/vee-observe

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vee Observe

Version Badge GZipped size License Downloads GitHub contributors GitHub stars

Vue implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.

Features

  • 📦 Component API - With vee-observe it's easier than ever to monitor elements
  • ⚡️ Optimized performance - Reuses Intersection Observer instances where possible
  • ⚙️ Matches native API - Intuitive to use
  • 🧪 Ready to test - Mocks the Intersection Observer for easy testing with Jest
  • 💥 Tiny bundle - Around 1.1kB

Installation

Install using Yarn:

yarn add vee-observe

or NPM:

npm install vee-observe --save

Usage

vee-observe component

<template>
  <div id="app">
    <div class="large-content__wrapper">
      Scroll down to see the image
    </div>

    <vee-observe
      :root="null"
      :root-margin="'0px'"
      :threshold="0"
      :once="false"
      @on-change="onChange"
      @not-supported="notSupported"
    >
      <img :src="imgSrc" />
    </vee-observe>
  </div>
</template>

<script>
import VeeObserve from './components/observer/observer.vue';

export default {
  name: 'App',
  data () {
    return {
      imgSrc: '',
    };
  },
  components: { VeeObserve },
  methods: {
    onChange (entry) {
      console.log('on change', entry);
      if (entry.isIntersecting) {
        console.log('intersecting');
        this.imgSrc = 'https://picsum.photos/200/300';
      }
    },
    
    notSupported () {
      console.log('not supported');
      this.imgSrc = 'https://picsum.photos/200/300';
    },
  },
};
</script>

<style>
.large-content__wrapper {
  height: 2000px;
  line-height: 1000px;
  text-align: center;
  font-size: 48px;
  color: #2c3e50;
  font-weight: bold;
}
</style>

API

Options

Provide these as the options argument as props on the <vee-observe /> component.

Name Type Default Description
root Element document The Intersection Observer interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is null, then the bounds of the actual document viewport are used.
rootMargin string '0px' Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Defaults to all zeros.
threshold number or number[] 0 Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points.
once boolean false Only trigger the observer once.
onChange (entry, unobserve) => void undefined Call this function whenever the intersection state changes. It will receive the current IntersectionObserverEntry along with unobserve function to stop monitoring and observing the component.
notSupported () => void undefined Call this function if intersection observer is not support.

About

Detect when an element is becoming visible or hidden on the page using Vue component for the Intersection observer API

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published