@rooks/use-on-window-resize/lib/index.js

A React hook for window on resize event

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
  typeof define === 'function' && define.amd ? define(['react'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.useOnWindowResize = factory(global.React));
}(this, (function (react) { 'use strict';

  /**
   * useIsomorphicEffect
   * Resolves to useEffect when "window" is not in scope and useLayout effect in the browser
   * @param {function} callback Callback function to be called on mount
   */
  const useIsomorphicEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;

  /**
   * useFreshRef
   * @param value The value which needs to be fresh at all times. Probably
   * best used with functions
   * @param preferLayoutEffect Should the value be updated using a layout effect
   * or a passive effect. Defaults to false.
   * @returns A ref containing the fresh value
   */
  function useFreshRef(value, preferLayoutEffect = false) {
      const useEffectToUse = preferLayoutEffect ? useIsomorphicEffect : react.useEffect;
      const ref = react.useRef(value);
      useEffectToUse(() => {
          ref.current = value;
      });
      return ref;
  }

  function useFreshTick(callback) {
      const freshRef = useFreshRef(callback);
      function tick(...args) {
          if (freshRef && typeof freshRef.current === "function") {
              freshRef.current(...args);
          }
      }
      return tick;
  }

  /**
   *  useGlobalObjectEventListener hook
   *
   *  A react hook to an event listener to a global object
   *
   * @param {Window|Document} globalObject The global object to add event onto
   * @param {string} eventName The event to track
   * @param {function} callback The callback to be called on event
   * @param {object} conditions The options to be passed to the event listener
   * @param {boolean} when Should the event listener be active
   * @param {boolean} isLayoutEffect Should it use layout effect. Defaults to false
   * @return {undefined}
   */
  function useGlobalObjectEventListener(globalObject, eventName, callback, listenerOptions = {}, when = true, isLayoutEffect = false) {
      const freshCallback = useFreshTick(callback);
      const { capture, passive, once } = listenerOptions;
      const useEffectToRun = isLayoutEffect ? useIsomorphicEffect : react.useEffect;
      useEffectToRun(() => {
          if (typeof globalObject !== "undefined" && globalObject.addEventListener && when) {
              globalObject.addEventListener(eventName, freshCallback, listenerOptions);
              return () => {
                  globalObject.removeEventListener(eventName, freshCallback, listenerOptions);
              };
          }
      }, [eventName, capture, passive, once]);
  }

  /**
   *
   * useOnWindowResize hook
   *
   * Fires a callback when window resizes
   *
   * @param {function} callback Callback to be called before unmount
   * @param {boolean} when When the handler should be applied
   * @param {boolean} isLayoutEffect Should it use layout effect. Defaults to false
   */
  function useOnWindowResize(callback, when = true, isLayoutEffect = false) {
      useGlobalObjectEventListener(window, "resize", callback, { passive: true }, when, isLayoutEffect);
  }

  return useOnWindowResize;

})));
//# sourceMappingURL=index.js.map