useOrientation

import React from "react";
import { useOrientation } from "rooks";

export default function App() {
  const orientation = useOrientation();

  if (!orientation) {
    return <div>Orientation API not supported</div>;
  }

  return (
    <div>
      <h1>Device Orientation</h1>
      <div>
        <strong>Angle:</strong> {orientation.angle}°
      </div>
      <div>
        <strong>Type:</strong> {orientation.type}
      </div>
      
      <div style={{ marginTop: '20px' }}>
        <p>Try rotating your device to see the orientation change!</p>
        
        {orientation.type.includes('portrait') && (
          <div style={{ color: 'blue' }}>
            📱 Portrait mode detected
          </div>
        )}
        
        {orientation.type.includes('landscape') && (
          <div style={{ color: 'green' }}>
            🔄 Landscape mode detected
          </div>
        )}
      </div>
    </div>
  );
}