Skip to content
On this page

useDeviceOrientation

Category
Last Changed
7 months ago

Reactive DeviceOrientationEvent. Provide web developers with information from the physical orientation of the device running the web page.

Demo

isSupported: false
isAbsolute: false
alpha: null
beta: null
gamma: null

Usage

import { useDeviceOrientation } from '@vueuse/core'

const {
  isAbsolute,
  alpha,
  beta,
  gamma,
} = useDeviceOrientation()
import { useDeviceOrientation } from '@vueuse/core'

const {
  isAbsolute,
  alpha,
  beta,
  gamma,
} = useDeviceOrientation()
StateTypeDescription
isAbsolutebooleanA boolean that indicates whether or not the device is providing orientation data absolutely.
alphanumberA number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360.
betanumberA number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180.
gammanumberA number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90.

You can find more information about the state on the MDN.

Component Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

<UseDeviceOrientation v-slot="{ alpha, beta, gamma }">
  Alpha: {{ alpha }}
  Beta: {{ beta }}
  Gamma: {{ gamma }}
</UseDeviceOrientation>
<UseDeviceOrientation v-slot="{ alpha, beta, gamma }">
  Alpha: {{ alpha }}
  Beta: {{ beta }}
  Gamma: {{ gamma }}
</UseDeviceOrientation>

Type Declarations

/**
 * Reactive DeviceOrientationEvent.
 *
 * @see https://vueuse.org/useDeviceOrientation
 * @param options
 */
export declare function useDeviceOrientation(options?: ConfigurableWindow): {
  isSupported: boolean
  isAbsolute: Ref<boolean>
  alpha: Ref<number | null>
  beta: Ref<number | null>
  gamma: Ref<number | null>
}
export declare type UseDeviceOrientationReturn = ReturnType<
  typeof useDeviceOrientation
>
/**
 * Reactive DeviceOrientationEvent.
 *
 * @see https://vueuse.org/useDeviceOrientation
 * @param options
 */
export declare function useDeviceOrientation(options?: ConfigurableWindow): {
  isSupported: boolean
  isAbsolute: Ref<boolean>
  alpha: Ref<number | null>
  beta: Ref<number | null>
  gamma: Ref<number | null>
}
export declare type UseDeviceOrientationReturn = ReturnType<
  typeof useDeviceOrientation
>

Source

SourceDemoDocs

Contributors

Anthony Fu
Antério Vieira
Shinigami
wheat
Alex Kozack

Changelog

No recent changes
useDeviceOrientation has loaded