useScreenSafeArea

React sensor hook that tracks env(safe-area-inset-*)

useScreenSafeArea reads the CSS env(safe-area-inset-*) values to determine the safe area insets on devices with notches, rounded corners, or software navigation bars. It returns a tuple of four strings (top, right, bottom, left) representing the inset values, plus a debounced update function for manual refresh. These values are useful for positioning content to avoid being obscured by device hardware or system UI.

When to Use

Positioning fixed or sticky elements (headers, footers, FABs) to avoid overlap with device notches or home indicators
Adjusting layout padding on iOS devices with notches or Android devices with gesture navigation bars
Building full-viewport experiences (games, maps) that need to account for hardware obstructions

Notes

SSR-safe: Returns "0px" for all insets during server-side rendering. No DOM or CSS computation occurs on the server.
CSS env() function: Requires the page to include <meta name="viewport" content="viewport-fit=cover"> for the safe area insets to be non-zero.
Related hooks: See also usePlatform for detecting the device platform and useMobileLandscape for orientation detection.

Usage

Live Editor

function Demo() {
  const [top, right, bottom, left] = useScreenSafeArea();
  return (
    <div>
      <div>
        top: <>{top}</>
      </div>
      <div>
        bottom: <>{bottom}</>
      </div>
      <div>
        left: <>{left}</>
      </div>
      <div>
        right: <>{right}</>
      </div>
    </div>
  );
};

Result

API