/horizon

An Intersection Observer wrapper with some smart defaults

Primary LanguageJavaScript

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();