Have ideas to improve npm?Join in the discussion! »

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

    2.1.0 • Public • Published

    ui-event-performance

    NPM version NPM monthly download

    Optimised way to subscribe to browser DOM UI Events using requestAnimationFrame.

    Since resize/scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame.

    Refer documentation: https://developer.mozilla.org/en-US/docs/Web/Events/resize#requestAnimationFrame_customEvent

    Installation

    yarn add ui-event-performance

    Usage

    import {subscribeEvent} from 'ui-event-performance';
    
    // window event listener
    const unsubscribeEvent = subscribeEvent('resize', 'optimizedResize');
    window.addEventListener('optimizedResize', () => {
      console.log('Resource conscious resize callback!');
    });
    
    // with DOM element listener
    const wrapperElement = document.querySelector('#my-wrapper');
    const handleScroll = () => {
      console.log('Wrapper is scrolling');
    };
    const unsubscribeEvent = subscribeEvent(
      'scroll',
      'optimizedScroll',
      wrapperElement
    );
    wrapperElement.addEventListener('optimizedScroll', handleScroll);
    
    // remove event listener
    wrapperElement.removeEventListener('optimizedScroll', handleScroll);
    
    // unsubscribe event
    unsubscribeEvent();

    License

    MIT

    Install

    npm i ui-event-performance

    DownloadsWeekly Downloads

    3

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    5.16 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar