⬅️ Back to Table of Contents

📄 useScreenSafeArea

📊 Analysis Summary

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

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useScreenSafeArea/index.ts

📦 Imports

Name	Source
ShallowRef	vue
isClient	@vueuse/shared
tryOnMounted	@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(): UseScreenSafeAreaReturn

Reactive env(safe-area-inset-*)

See: https://vueuse.org/useScreenSafeArea

Raw JSDoc

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

Calls:

• shallowRef (from vue)
• useCssVar (from ../useCssVar)
• tryOnMounted (from @vueuse/shared)
• useEventListener (from ../useEventListener)
• useDebounceFn (from @vueuse/shared)
• getValue

Code

export function useScreenSafeArea(): UseScreenSafeAreaReturn {
  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)'

    tryOnMounted(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,
  }
}

getValue(position: VarName): string

Parameters:

• position VarName

Returns: string

Calls:

• getComputedStyle(document.documentElement).getPropertyValue

Code

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

Internal helpers

Declared inside another function in this file.

update(): void

Returns: void

Calls:

• getValue

Code

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

---

Interfaces

UseScreenSafeAreaReturn

Interface Code

export interface UseScreenSafeAreaReturn {
  top: ShallowRef<string>
  right: ShallowRef<string>
  bottom: ShallowRef<string>
  left: ShallowRef<string>
  update: () => void
}

Properties

Name	Type	Optional	Description
top	ShallowRef<string>	✗	not shown
right	ShallowRef<string>	✗	not shown
bottom	ShallowRef<string>	✗	not shown
left	ShallowRef<string>	✗	not shown
update	() => void	✗	not shown

---

Type Aliases

VarName

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

---

Generated by Syntax Scribe