⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	3
📦 Imports	5
📊 Variables & Constants	4
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Type Aliases

🛠️ File Location:

📂 packages/core/useScreenSafeArea/index.ts

📦 Imports

Name	Source
isClient	@vueuse/shared
useDebounceFn	@vueuse/shared
shallowRef	vue
useCssVar	../useCssVar
useEventListener	../useEventListener

---

Variables & Constants

Name	Type	Kind	Value	Exported
topVarName	"--vueuse-safe-area-top"	const	'--vueuse-safe-area-top'	✗
rightVarName	"--vueuse-safe-area-right"	const	'--vueuse-safe-area-right'	✗
bottomVarName	"--vueuse-safe-area-bottom"	const	'--vueuse-safe-area-bottom'	✗
leftVarName	"--vueuse-safe-area-left"	const	'--vueuse-safe-area-left'	✗

---

Functions

useScreenSafeArea(): { top: any; right: any; bottom: any; left: any; update: () => void; }

Code

export function useScreenSafeArea() {
  const top = shallowRef('')
  const right = shallowRef('')
  const bottom = shallowRef('')
  const left = shallowRef('')

  if (isClient) {
    const topCssVar = useCssVar(topVarName)
    const rightCssVar = useCssVar(rightVarName)
    const bottomCssVar = useCssVar(bottomVarName)
    const leftCssVar = useCssVar(leftVarName)

    topCssVar.value = 'env(safe-area-inset-top, 0px)'
    rightCssVar.value = 'env(safe-area-inset-right, 0px)'
    bottomCssVar.value = 'env(safe-area-inset-bottom, 0px)'
    leftCssVar.value = 'env(safe-area-inset-left, 0px)'

    update()

    useEventListener('resize', useDebounceFn(update), { passive: true })
  }

  function update() {
    top.value = getValue(topVarName)
    right.value = getValue(rightVarName)
    bottom.value = getValue(bottomVarName)
    left.value = getValue(leftVarName)
  }

  return {
    top,
    right,
    bottom,
    left,
    update,
  }
}

• JSDoc:

  /**
   * Reactive `env(safe-area-inset-*)`
   *
   * @see https://vueuse.org/useScreenSafeArea
   */
  

• Return Type: { top: any; right: any; bottom: any; left: any; update: () => void; }

• Calls:
• shallowRef (from vue)
• useCssVar (from ../useCssVar)
• update
• useEventListener (from ../useEventListener)
• useDebounceFn (from @vueuse/shared)
• getValue

update(): void

Code

function update() {
    top.value = getValue(topVarName)
    right.value = getValue(rightVarName)
    bottom.value = getValue(bottomVarName)
    left.value = getValue(leftVarName)
  }

• Return Type: void
• Calls:
• getValue

getValue(position: VarName): string

Code

function getValue(position: VarName) {
  return getComputedStyle(document.documentElement).getPropertyValue(position)
}

• Parameters:
• position: VarName
• Return Type: string
• Calls:
• getComputedStyle(document.documentElement).getPropertyValue

---

Type Aliases

VarName

type VarName = '--vueuse-safe-area-top' | '--vueuse-safe-area-right' | '--vueuse-safe-area-bottom' | '--vueuse-safe-area-left';

---