Skip to main content

​
Overview

The useWidgetGlobal hook provides access to individual global properties from the widget runtime. This is a low-level hook that other convenience hooks are built upon.

​
Import

import { useWidgetGlobal } from 'sunpeak';

​
Signature

function useWidgetGlobal<K extends keyof WidgetGlobals>(
  key: K
): WidgetGlobals[K] | null

​
Parameters

​
key
string
required
The global property key to read (e.g., 'theme', 'locale', 'maxHeight').

​
Returns

​
return
WidgetGlobals[K] | null
The current value of the global property, or null if not available. Automatically updates when the value changes.

​
Usage

import { useWidgetGlobal } from 'sunpeak';

function MyWidget() {
  const theme = useWidgetGlobal('theme');
  const locale = useWidgetGlobal('locale');

  return (
    <div>
      Theme: {theme}, Locale: {locale}
    </div>
  );
}
Most developers should use the convenience hooks like useTheme(), useLocale(), etc. instead of calling useWidgetGlobal() directly.