Horizon

A light wrapper round the Intersection Observer API. Please note this is not a polyfill for Intersection Observer.

Install

yarn add @mintuz/horizon --save

Usage

Config

| Key | Value | Description | Default | | -------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | | onEntry | (entry) => {} | Callback which is called when the element to observe is in view, triggers once if triggerOnce is set to true | N/A | | onExit | (entry) => {} | Callback which is called when the element is out of view | N/A | | triggerOnce | true | Will trigger onEntry callback once, useful for lazyLoading | false | | toObserve | document.querySelector('.element-to-come-in-view') | The element to observe which may or may not come into view | Required | | intersectionObserverConfig | { root: null, rootMargin: '35%', threshold: 0 } | Options passed to IntersectionObserver API | { root: null rootMargin: '35%', threshold: 0 } |

Example

import Horizon from '@mintuz/horizon';

const observed = Horizon({
    onEntry(entry) {
        console.log('element in view', entry);
    },
    onExit(entry) {
        console.log('element out of view', entry);
    },
    triggerOnce: true,
    toObserve: document.querySelector('.element-to-come-in-view'),
    intersectionObserverConfig: {
        root: document.querySelector('body'),
        rootMargin: '0px',
        threshold: 1.0
    }
});

observed.unobserve();