appear-event
v0.3.5
Published
Element appear event
Downloads
20
Maintainers
Readme
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
intersectionObserverOptions
IntersectionObserver Properties
appearEvent
and disappearEvent
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.