⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	3
📦 Imports	6
📊 Variables & Constants	1
⚡ Async/Await Patterns	2
📐 Interfaces	1
📑 Type Aliases	3

📚 Table of Contents

• Imports
• Variables & Constants
• Async/Await Patterns
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useScreenOrientation/index.ts

📦 Imports

Name	Source
ConfigurableWindow	../_configurable
deepRef	vue
shallowRef	vue
defaultWindow	../_configurable
useEventListener	../useEventListener
useSupported	../useSupported

---

Variables & Constants

Name	Type	Kind	Value	Exported
screenOrientation	ScreenOrientation	const	(isSupported.value ? window!.screen.orientation : {}) as ScreenOrientation	✗

---

Async/Await Patterns

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

---

Functions

useScreenOrientation(options: ConfigurableWindow): { isSupported: any; orientation: any; angle: any; lockOrientation: (type: OrientationLockType) => Promise<void>; unlockOrientation: () => void; }

Code

export function useScreenOrientation(options: ConfigurableWindow = {}) {
  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 = deepRef<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,
  }
}

• JSDoc:

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

• Parameters:

• options: ConfigurableWindow
• Return Type: { isSupported: any; orientation: any; angle: any; lockOrientation: (type: OrientationLockType) => Promise<void>; unlockOrientation: () => void; }
• Calls:
• useSupported (from ../useSupported)
• deepRef (from vue)
• shallowRef (from vue)
• useEventListener (from ../useEventListener)
• screenOrientation.lock
• Promise.reject
• screenOrientation.unlock

lockOrientation(type: OrientationLockType): Promise<void>

Code

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

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

• Parameters:
• type: OrientationLockType
• Return Type: Promise<void>
• Calls:
• screenOrientation.lock
• Promise.reject

unlockOrientation(): void

Code

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

• Return Type: void
• Calls:
• 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>	✗
unlock	() => void	✗
type	OrientationType	✗
angle	number	✗
addEventListener	(type: 'change', listener: (this: this, ev: Event) => any, useCapture?: boolean) => void	✗

---

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';

UseScreenOrientationReturn

type UseScreenOrientationReturn = ReturnType<typeof useScreenOrientation>;

---