1import { useEffect, useState } from "react";
2
3interface OrientationState {
4 angle: number;
5 type: string;
6}
7
8export function useOrientation(): OrientationState {
9 const [orientation, setOrientation] = useState<OrientationState>({
10 angle: 0,
11 type: "landscape-primary",
12 });
13
14 useEffect(() => {
15 const handleChange = () => {
16 const { angle, type } = window.screen.orientation;
17 setOrientation({
18 angle,
19 type,
20 });
21 };
22
23 const handleResize = () => {
24 handleChange();
25 };
26
27 window.addEventListener("orientationchange", handleChange);
28 window.addEventListener("resize", handleResize);
29 handleChange();
30
31 return () => {
32 window.removeEventListener("orientationchange", handleChange);
33 window.removeEventListener("resize", handleResize);
34 };
35 }, []);
36
37 return orientation;
38}