UseOrientation

1'use client';
2 
3import { useEffect, useState } from 'react';
4 
5export type Orientation = 'portrait' | 'landscape';
6 
7function getOrientation(win?: typeof window): Orientation {
8  if (!win) return 'portrait'; // Default for SSR
9  return win.matchMedia('(orientation: portrait)').matches
10    ? 'portrait'
11    : 'landscape';
12}
13 
14export function useOrientation(): Orientation {
15  const [orientation, setOrientation] = useState<Orientation>(() =>
16    getOrientation(typeof window !== 'undefined' ? window : undefined),
17  );
18 
19  useEffect(() => {
20    if (typeof window === 'undefined') return;
21    const mql = window.matchMedia('(orientation: portrait)');
22 
23    // Handler for orientation changes
24    const handler = () => setOrientation(getOrientation(window));
25 
26    // Prefer addEventListener, fallback to addListener for older browsers
27    if (typeof mql.addEventListener === 'function') {
28      mql.addEventListener('change', handler);
29    } else {
30      mql.addListener(handler);
31    }
32 
33    return () => {
34      if (typeof mql.removeEventListener === 'function') {
35        mql.removeEventListener('change', handler);
36      } else {
37        mql.removeListener(handler);
38      }
39    };
40  }, []);
41 
42  return orientation;
43}