@shopify/shop-minis-react/src/hooks/util/useSafeArea.ts

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import type {SafeAreaInsets} from '@shopify/shop-minis-platform'

const DEFAULT_INSETS: SafeAreaInsets = {top: 0, right: 0, bottom: 0, left: 0}

/**
 * Returns the safe area insets for the current device.
 *
 * These values represent the areas of the screen that are obscured by
 * system UI (home indicator, navigation bar, etc). Use them to ensure
 * content isn't hidden behind system chrome.
 *
 * The values are also available as CSS custom properties:
 * `--safe-area-inset-top`, `--safe-area-inset-right`,
 * `--safe-area-inset-bottom`, `--safe-area-inset-left`
 *
 * @example
 * ```tsx
 * const {bottom} = useSafeArea()
 * return <div style={{paddingBottom: bottom}}>Content</div>
 * ```
 */
export function useSafeArea(): SafeAreaInsets {
  return window.minisParams?.safeAreaInsets ?? DEFAULT_INSETS
}