import { useWindowSize } from "@pyr33x/hooks";
 
export const App = () => {
  const { width, height } = useWindowSize();
 
  return (
    <div
      className={`${width > 960 ? "container" : "container-xl"} ${height > 960 ? "container" : "container-xl"}`}
    >
      {/* ... */}
    </div>
  );
};

import { useState, useEffect } from "react";
 
type Sizes = {
  width: number;
  height: number;
};
 
export const useWindowSize = (): Sizes => {
  const [windowSize, setWindowSize] = useState<Sizes>({
    width: window.innerWidth,
    height: window.innerHeight,
  });
 
  const handleResize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  };
 
  useEffect(() => {
    window.addEventListener("resize", handleResize);
 
    return () => window.removeEventListener("resize", handleResize);
  }, []);
 
  return windowSize;
};