⬅️ Back to Table of Contents

📄 useDeviceOrientation

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	8
📐 Interfaces	2

📚 Table of Contents

• Imports
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useDeviceOrientation/index.ts

📦 Imports

Name	Source
Ref	vue
ShallowRef	vue
ConfigurableWindow	../_configurable
Supportable	../types
shallowRef	vue
defaultWindow	../_configurable
useEventListener	../useEventListener
useSupported	../useSupported

---

Functions

useDeviceOrientation(options: UseDeviceOrientationOptions): UseDeviceOrientationReturn

Reactive DeviceOrientationEvent.

Parameters:

• options any: No description

See: https://vueuse.org/useDeviceOrientation

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Reactive DeviceOrientationEvent.
 *
 * @see https://vueuse.org/useDeviceOrientation
 * @param options
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

• useSupported (from ../useSupported)
• shallowRef (from vue)
• useEventListener (from ../useEventListener)

Code

export function useDeviceOrientation(options: UseDeviceOrientationOptions = {}): UseDeviceOrientationReturn {
  const { window = defaultWindow } = options
  const isSupported = useSupported(() => window && 'DeviceOrientationEvent' in window)

  const isAbsolute = shallowRef(false)
  const alpha: Ref<number | null> = shallowRef(null)
  const beta: Ref<number | null> = shallowRef(null)
  const gamma: Ref<number | null> = shallowRef(null)

  if (window && isSupported.value) {
    useEventListener(window, 'deviceorientation', (event) => {
      isAbsolute.value = event.absolute
      alpha.value = event.alpha
      beta.value = event.beta
      gamma.value = event.gamma
    }, { passive: true })
  }

  return {
    isSupported,
    isAbsolute,
    alpha,
    beta,
    gamma,
  }
}

---

Interfaces

UseDeviceOrientationOptions

Interface Code

export interface UseDeviceOrientationOptions extends ConfigurableWindow {
}

UseDeviceOrientationReturn

Interface Code

export interface UseDeviceOrientationReturn extends Supportable {
  isAbsolute: ShallowRef<boolean, boolean>
  alpha: Ref<number | null, number | null>
  beta: Ref<number | null, number | null>
  gamma: Ref<number | null, number | null>
}

Properties

Name	Type	Optional	Description
isAbsolute	ShallowRef<boolean, boolean>	✗	not shown
alpha	Ref<number \| null, number \| null>	✗	not shown
beta	Ref<number \| null, number \| null>	✗	not shown
gamma	Ref<number \| null, number \| null>	✗	not shown

---

Generated by Syntax Scribe