nghiepdev/ui-event-performance

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

ui-event-performance

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

ui-event-performance's Issues

Need unsubscribeEvent

Would be nice if you had a way to unsubscribe from your event subscribeEvent.