Skip to main content

​
Overview

The useSafeArea hook returns the safe area insets, which define the areas of the screen that are not obscured by notches, rounded corners, or system UI.

​
Import

import { useSafeArea } from 'sunpeak';

​
Signature

function useSafeArea(): SafeArea | null

​
Returns

​
return
SafeArea | null
A SafeArea object with insets property, or null if not available.
{
  insets: {
    top: number;
    bottom: number;
    left: number;
    right: number;
  }
}

​
Usage

import { useSafeArea } from 'sunpeak';

function MyWidget() {
  const safeArea = useSafeArea();

  return (
    <div style={{
      paddingTop: safeArea?.insets.top || 0,
      paddingBottom: safeArea?.insets.bottom || 0,
    }}>
      Content respects safe areas
    </div>
  );
}