@intersect.mbo/govtool-delegation-pillar/src/hooks/useScreenDimension.ts

Delegation Pillar of the GovTool project

// TODO: Refactor this hook to remove the use of nested ternary operators
import { useEffect, useMemo, useState } from 'react';

export const useScreenDimension = () => {
  const [screenWidth, setScreenWidth] = useState<number>(window.innerWidth);
  const [isMobile, setIsMobile] = useState<boolean>(window.innerWidth < 768);
  const pagePadding = useMemo(
    () =>
      screenWidth < 768
        ? 2
        : screenWidth < 1024
          ? 6
          : screenWidth < 1440
            ? 8
            : screenWidth < 1920
              ? 10
              : 37,
    [screenWidth]
  );

  function handleWindowSizeChange() {
    setScreenWidth(window.innerWidth);
    setIsMobile(window.innerWidth < 768);
  }
  useEffect(() => {
    window.addEventListener('resize', handleWindowSizeChange);
    return () => {
      window.removeEventListener('resize', handleWindowSizeChange);
    };
  }, []);

  return {
    screenWidth,
    isMobile,
    pagePadding,
  };
};