Skip to content

useScreenOrientation ​

Hook that provides the current screen orientation

sensors
test coverage
Last changed: last month

TIP

This hook uses screen.orientation browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Installation ​

Library
CLI
Manual
typescript
import { useScreenOrientation } from '@siberiacancode/reactuse';

Usage ​

typescript
const { supported, value, lock, unlock } = useScreenOrientation();

Demo ​

Api ​

Returns

useScreenOrientationReturn

Type declaration ​

typescript
interface ScreenOrientation {
    lock: (orientation: OrientationLockType) => Promise<void>;
  }

export interface UseScreenOrientationValue {
  /** The current angle */
  angle: number;
  /** The current orientation type */
  orientationType: OrientationType;
}

export type OrientationLockType =
  | 'any'
  | 'landscape-primary'
  | 'landscape-secondary'
  | 'landscape'
  | 'natural'
  | 'portrait-primary'
  | 'portrait-secondary'
  | 'portrait';

export interface useScreenOrientationReturn {
  /** Whether the screen orientation is supported */
  supported: boolean;
  /** The current screen orientation value */
  value: UseScreenOrientationValue;
  /** Lock the screen orientation */
  lock: (orientation: OrientationLockType) => void;
  /** Unlock the screen orientation */
  unlock: () => void;
}

Source ​

Source • Demo

Contributors ​

D
debabin
debabin

Released under the MIT License.