useWindow react hook

useWindow.tsx

import { useState, useEffect, useRef } from 'react';

/**
 * Generated by
 * @link - https://chat.openai.com
 *
 * React hook to access the window object.
 * Make sure to check if window is defined before using it.
 *
 */

export const useWindow = (): Window | undefined => {
  const [window, setWindow] = useState<Window | undefined>();

  useEffect(() => {
    setWindow(window);
  }, []);

  return window;
};

/**
 * Generated by
 * @link - https://chat.openai.com
 *
 * This is the same as the above, but it uses a ref instead of state.
 *
 * This removes the to add a window existence check in the component,
 * but returns an runtime error if the window is not defined.
 */

const useWindowRef = (): Window => {
  const windowRef = useRef<Window | null>(null);

  useEffect(() => {
    windowRef.current = window;
  }, []);

  return windowRef.current!;
};