Skip to main content

​
Overview

The useDisplayMode hook returns the current display mode of the app. It is a convenience wrapper around useHostContext.

​
Import

import { useDisplayMode } from 'sunpeak';

​
Signature

function useDisplayMode(): McpUiDisplayMode

​
Returns

​
return
'inline' | 'pip' | 'fullscreen'
The current display mode. Defaults to 'inline' when unavailable.

​
Usage

import { useDisplayMode } from 'sunpeak';

function MyResource() {
  const displayMode = useDisplayMode();

  return (
    <div className={displayMode === 'fullscreen' ? 'h-screen' : 'max-h-96'}>
      Current mode: {displayMode}
    </div>
  );
}