use-dom-event.mjs 1.0 KB

12345678910111213141516171819202122232425262728293031323334
  1. import { useEffect } from 'react';
  2. import { addDomEvent } from './add-dom-event.mjs';
  3. /**
  4. * Attaches an event listener directly to the provided DOM element.
  5. *
  6. * Bypassing React's event system can be desirable, for instance when attaching non-passive
  7. * event handlers.
  8. *
  9. * ```jsx
  10. * const ref = useRef(null)
  11. *
  12. * useDomEvent(ref, 'wheel', onWheel, { passive: false })
  13. *
  14. * return <div ref={ref} />
  15. * ```
  16. *
  17. * @param ref - React.RefObject that's been provided to the element you want to bind the listener to.
  18. * @param eventName - Name of the event you want listen for.
  19. * @param handler - Function to fire when receiving the event.
  20. * @param options - Options to pass to `Event.addEventListener`.
  21. *
  22. * @public
  23. */
  24. function useDomEvent(ref, eventName, handler, options) {
  25. useEffect(() => {
  26. const element = ref.current;
  27. if (handler && element) {
  28. return addDomEvent(element, eventName, handler, options);
  29. }
  30. }, [ref, eventName, handler, options]);
  31. }
  32. export { useDomEvent };