appear-event

Element appear event.

Install

yarn add appear-event or npm i appear-event --save

Usage

observe and unobserve

const { observe, unobserve } = require('appear-event');
 
const el = getElementSomehow();
const eventListenerOptions = getEventListenerOptions();
const intersectionObserverOptions = getIntersectionObserverOptions();
 
function onAppear(appearEvent) {
  // element appeared
}
 
function onDisappear(disappearEvent) {
  // element disappeared
}
 
observe(el, intersectionObserverOptions); // watch for appear and disappear event
el.addEventListener('appear', onAppear, eventListenerOptions);
el.addEventListener('disappear', onDisappear, eventListenerOptions);
el.removeEventListener('appear', onAppear, eventListenerOptions);
el.removeEventListener('disappear', onDisappear, eventListenerOptions);
unobserve(el, intersectionObserverOptions); // unwatch for appear and disappear event

eventListenerOptions

addEventListener options

intersectionObserverOptions

IntersectionObserver Properties

appearEvent and disappearEvent

CustomEvent

detail

appearEvent.detail and disappearEvent.detail is an IntersectionObserveEntry

event-listeners

const { addAppearListener, addDisappearListener, removeAppearListener, removeDisappearListener } = require('appear-event/lib/event-listener');
 
const el = getElementSomehow();
const eventListenerOptions = getEventListenerOptions();
const intersectionObserverOptions = getIntersectionObserverOptions();
 
function onAppear(appearEvent) {
  // element appeared
}
 
function onDisappear(disappearEvent) {
  // element disappeared
}
 
addAppearListener(el, onAppear, { ...eventListenerOptions, ...intersectionObserverOptions });
addDisappearListener(el, onDisappear, { ...eventListenerOptions, ...intersectionObserverOptions });
removeAppearListener(el, onAppear, { ...eventListenerOptions, ...intersectionObserverOptions });
removeDisappearListener(el, onDisappear, { ...eventListenerOptions, ...intersectionObserverOptions });

In React

See demo Also see jsx-native-events

FAQ

Q: Does zero area elements appears when they are in the screen?

A: Yes. And if you'd like to tell if the element is a zero area element, use event.detail.boundingClientRect to get the element dimensions.

Project created by create-n.