yx-react-template/src/course/orientation/useOrientation.ts

import { useEffect, useState } from "react";

function getIsPortrait() {
	if (typeof window === "undefined") return false;
	return window.innerHeight > window.innerWidth;
}

export function useOrientation() {
	const [isPortrait, setIsPortrait] = useState(getIsPortrait);

	useEffect(() => {
		const updateOrientation = () => setIsPortrait(getIsPortrait());
		window.addEventListener("resize", updateOrientation);
		window.addEventListener("orientationchange", updateOrientation);
		return () => {
			window.removeEventListener("resize", updateOrientation);
			window.removeEventListener("orientationchange", updateOrientation);
		};
	}, []);

	return isPortrait;
}