Package Exports

@mintuz/horizon

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mintuz/horizon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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