hook for triggering callback on browser resize

useResize.js

import { useEffect, useState } from 'react';

/**
 * Usage:
 *
 * const ref = useRef();
 *
 * useResize(ref, (data) => {
 *   console.log(data.width);
 * });
 *
 * return (
 *   <div ref={ref}>
 *     The content
 *   </div>
 * );
 */

const useResize = (ref, callback, defaultValue = {}) => {
  const [initialize, setInitialized] = useState(false);
  const getValue = () => {
    const target = ref && ref.current;
    if (!target) {
      return defaultValue;
    }

    return {
      height: target.offsetHeight,
      width: target.offsetWidth,
      x: target.offsetLeft,
      y: target.offsetTop,
      target
    };
  }
  const onResize = () => {
    if ('function' === typeof callback) {
      callback(getValue());
    }
  }

  useEffect(() => {
    window.addEventListener('resize', onResize);
    if (!initialize) {
      onResize();
      setInitialized(true);
    }

    return () => {
      window.removeEventListener('resize', onResize);
    }
  })
}

export const useResize;