ScreenOrientation.ts

PHOTO EMBED

Tue Nov 14 2023 12:26:53 GMT+0000 (Coordinated Universal Time)

Saved by @batalkin #javascript

import { onMounted, onUnmounted, ref } from 'vue'

function useScreenOrientation() {
  const portrait = window.matchMedia('(orientation: portrait)')
  const orientation = ref(portrait.matches ? 'portrait' : 'landscape')

  function orientationListener(e: MediaQueryListEvent) {
    orientation.value = e.matches ? 'portrait' : 'landscape'
  }

  onMounted(() => {
    portrait.addEventListener('change', orientationListener)
  })

  onUnmounted(() => {
    portrait.removeEventListener('change', orientationListener)
  })

  return orientation
}

export {
  useScreenOrientation,
  useScreenOrientation as default,
}
content_copyCOPY