react-reuse-hooks/src/hooks/useDeviceOrientation.js

A collection of 30+ production-ready reusable React hooks for web apps, covering state, effects, media, forms, and utilities.

import { useState, useEffect } from "react";

export function useDeviceOrientation() {
  const [orientation, setOrientation] = useState({
    alpha: null,
    beta: null,
    gamma: null,
  });

  useEffect(() => {
    const handler = (event) => {
      setOrientation({
        alpha: event.alpha,
        beta: event.beta,
        gamma: event.gamma,
      });
    };

    window.addEventListener("deviceorientation", handler);
    return () => window.removeEventListener("deviceorientation", handler);
  }, []);

  return orientation;
}