mintuz/horizon

An Intersection Observer wrapper with some smart defaults

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

horizon's Issues

Add entry for methods!

                    if (config.onEntry) {
                        config.onEntry(entry);
                    }

Right now there is no entry!

                    if (config.onEntry) {
                        config.onEntry();
                    }

https://github.com/mintuz/horizon/blob/master/src/index.js#L43

As a result:
1 - docs are wrong

onEntry	(entry) => {}	Callback which is called when the element to observe is in view, triggers once if triggerOnce is set to true	N/A

2 - using this lib we can not get currently observed entry inside hooks!