@mintuz/horizon

    2.1.0 • Public • Published

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

    Install

    npm i @mintuz/horizon

    DownloadsWeekly Downloads

    25

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    64.4 kB

    Total Files

    25

    Last publish

    Collaborators

    • mintuz