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>
  );
}

import { useOrientation } from "rooks";

function OrientationCard() {
  const orientation = useOrientation();

  if (!orientation) {
    return null;
  }

  return (
    <div>
      <p>Current orientation: {orientation.type}</p>
      <p>Angle: {orientation.angle}°</p>
      <div
        style={{
          width: 120,
          height: 120,
          display: "grid",
          placeItems: "center",
          border: "1px solid #d1d5db",
          transform: `rotate(${orientation.angle}deg)`,
          transition: "transform 150ms ease",
        }}
      >
        Preview
      </div>
    </div>
  );
}