useSafeArea - sunpeak

sunpeak API

Overview

The useSafeArea hook returns the safe area insets for handling device notches, status bars, and other system UI. It is a convenience wrapper around useHostContext.

For most resources, use the <SafeArea> component instead — it applies both safe area padding and viewport height constraints automatically.

Import

import { useSafeArea } from 'sunpeak';

Signature

function useSafeArea(): SafeAreaInsets

Returns

return

SafeAreaInsets

Safe area insets object. Defaults to all zeros when unavailable.

{
  top: number;    // pixels
  bottom: number; // pixels
  left: number;   // pixels
  right: number;  // pixels
}

Usage

import { useSafeArea } from 'sunpeak';

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

  return (
    <div style={{ paddingTop: safeArea.top, paddingBottom: safeArea.bottom }}>
      Content with safe area padding.
    </div>
  );
}

Safe area insets come from McpUiHostContext.safeAreaInsets.

useSendLogSend structured log messages.

​Overview

​Import

​Signature

​Returns

​Usage

Overview

Import

Signature

Returns

Usage