useScreenOrientation

Reactive Screen Orientation API. It provides web developers with information about the user's current screen orientation.

Demo

For best results, please use a mobile or tablet device (or use your browser's native inspector to simulate an orientation change)

isSupported: false isSupported: false

Orientation Type:

Orientation Angle: 0

Usage

import { useScreenOrientation } from './'

const {
  isSupported,
  orientation,
  angle,
  lockOrientation,
  unlockOrientation,
} = useScreenOrientation()

To lock the orientation, you can pass an OrientationLockType to the lockOrientation function:

import { useScreenOrientation } from './'

const {
  isSupported,
  orientation,
  angle,
  lockOrientation,
  unlockOrientation,
} = useScreenOrientation()

lockOrientation('portrait-primary')

and then unlock again, with the following:

unlockOrientation()

Accepted orientation types are one of "landscape-primary", "landscape-secondary", "portrait-primary", "portrait-secondary", "any", "landscape", "natural" and "portrait".

Screen Orientation API MDN