Nincompoops Producing Methane

    appear-event
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.5 • Public • Published

    appear-event

    Element appear event.

    Build Status NPM Version NPM Downloads MIT License Standard Version Codecov

    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.

    Install

    npm i appear-event

    DownloadsWeekly Downloads

    5

    Version

    0.3.5

    License

    MIT

    Unpacked Size

    532 kB

    Total Files

    30

    Last publish

    Collaborators

    • vivaxy