useOrientation

import { useOrientation } from 'node-fullykiosk';

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

  return (
    <div>
      <p>Current orientation: {orientation}°</p>
    </div>
  );
}

import { useOrientation } from 'node-fullykiosk';

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

  const getOrientationLabel = (degrees: number | undefined) => {
    switch (degrees) {
      case 0:
        return 'Portrait';
      case 90:
        return 'Landscape (Right)';
      case 180:
        return 'Portrait (Upside Down)';
      case 270:
        return 'Landscape (Left)';
      default:
        return 'Unknown';
    }
  };

  return (
    <div>
      <p>Orientation: {getOrientationLabel(orientation)}</p>
      <p>Degrees: {orientation}°</p>
    </div>
  );
}

import { useOrientation } from 'node-fullykiosk';

function ResponsiveLayout() {
  const orientation = useOrientation();
  const isLandscape = orientation === 90 || orientation === 270;

  return (
    <div className={isLandscape ? 'landscape-layout' : 'portrait-layout'}>
      {isLandscape ? (
        <div>Landscape content layout</div>
      ) : (
        <div>Portrait content layout</div>
      )}
    </div>
  );
}

import { useOrientation } from 'node-fullykiosk';

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

  const getIcon = (degrees: number | undefined) => {
    if (degrees === 90 || degrees === 270) return '📱';
    return '📲';
  };

  return (
    <div>
      <span style={{ fontSize: '48px', transform: `rotate(${orientation ?? 0}deg)` }}>
        {getIcon(orientation)}
      </span>
      <p>{orientation}°</p>
    </div>
  );
}