⬅️ Back to Table of Contents

📄 useScreenOrientation

📊 Analysis Summary

Metric	Count
🔧 Functions	3
📦 Imports	7
⚡ Async/Await Patterns	2
📐 Interfaces	3
📑 Type Aliases	2

📚 Table of Contents

• Imports
• Async/Await Patterns
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useScreenOrientation/index.ts

📦 Imports

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

---

Async/Await Patterns

Type	Function	Await Expressions	Promise Chains
promise-chain	useScreenOrientation	none	Promise.reject
promise-chain	lockOrientation	none	Promise.reject

---

Functions

useScreenOrientation(options: UseScreenOrientationOptions): UseScreenOrientationReturn

Reactive screen orientation

See: https://vueuse.org/useScreenOrientation

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Reactive screen orientation
 *
 * @see https://vueuse.org/useScreenOrientation
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

• useSupported (from ../useSupported)
• shallowRef (from vue)
• useEventListener (from ../useEventListener)
• screenOrientation.lock
• Promise.reject
• screenOrientation.unlock

Code

export function useScreenOrientation(options: UseScreenOrientationOptions = {}): UseScreenOrientationReturn {
  const {
    window = defaultWindow,
  } = options

  const isSupported = useSupported(() => window && 'screen' in window && 'orientation' in window.screen)

  const screenOrientation = (isSupported.value ? window!.screen.orientation : {}) as ScreenOrientation

  const orientation = shallowRef<OrientationType | undefined>(screenOrientation.type)
  const angle = shallowRef(screenOrientation.angle || 0)

  if (isSupported.value) {
    useEventListener(window, 'orientationchange', () => {
      orientation.value = screenOrientation.type
      angle.value = screenOrientation.angle
    }, { passive: true })
  }

  const lockOrientation = (type: OrientationLockType) => {
    if (isSupported.value && typeof screenOrientation.lock === 'function')
      return screenOrientation.lock(type)

    return Promise.reject(new Error('Not supported'))
  }

  const unlockOrientation = () => {
    if (isSupported.value && typeof screenOrientation.unlock === 'function')
      screenOrientation.unlock()
  }

  return {
    isSupported,
    orientation,
    angle,
    lockOrientation,
    unlockOrientation,
  }
}

Internal helpers

Declared inside another function in this file.

lockOrientation(type: OrientationLockType): Promise<void>

Parameters:

• type OrientationLockType

Returns: Promise<void>

Calls:

• screenOrientation.lock
• Promise.reject

Code

(type: OrientationLockType) => {
    if (isSupported.value && typeof screenOrientation.lock === 'function')
      return screenOrientation.lock(type)

    return Promise.reject(new Error('Not supported'))
  }

unlockOrientation(): void

Returns: void

Calls:

• screenOrientation.unlock

Code

() => {
    if (isSupported.value && typeof screenOrientation.unlock === 'function')
      screenOrientation.unlock()
  }

---

Interfaces

ScreenOrientation

Interface Code

export interface ScreenOrientation extends EventTarget {
  lock: (orientation: OrientationLockType) => Promise<void>
  unlock: () => void
  readonly type: OrientationType
  readonly angle: number
  addEventListener: (type: 'change', listener: (this: this, ev: Event) => any, useCapture?: boolean) => void
}

Properties

Name	Type	Optional	Description
lock	(orientation: OrientationLockType) => Promise<void>	✗	not shown
unlock	() => void	✗	not shown
type	OrientationType	✗	not shown
angle	number	✗	not shown
addEventListener	(type: 'change', listener: (this: this, ev: Event) => any, useCapture?: boole...	✗	not shown

UseScreenOrientationOptions

Interface Code

export interface UseScreenOrientationOptions extends ConfigurableWindow {
}

UseScreenOrientationReturn

Interface Code

export interface UseScreenOrientationReturn extends Supportable {
  orientation: ShallowRef<OrientationType | undefined>
  angle: ShallowRef<number>
  lockOrientation: (type: OrientationLockType) => Promise<void>
  unlockOrientation: () => void
}

Properties

Name	Type	Optional	Description
orientation	ShallowRef<OrientationType \| undefined>	✗	not shown
angle	ShallowRef<number>	✗	not shown
lockOrientation	(type: OrientationLockType) => Promise<void>	✗	not shown
unlockOrientation	() => void	✗	not shown

---

Type Aliases

OrientationType

type OrientationType = 'portrait-primary' | 'portrait-secondary' | 'landscape-primary' | 'landscape-secondary';

OrientationLockType

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

---

Generated by Syntax Scribe