useMaxHeight

Get the maximum height available for your widget. This hook helps prevent content overflow and ensures your widget fits within the allocated space in the ChatGPT interface.

Usage

import { useMaxHeight } from '@chatgpt-apps/sdk';

function MyWidget() {
  const maxHeight = useMaxHeight();

  return (
    <div style={{ maxHeight, overflow: 'auto' }}>
      <ScrollableContent />
    </div>
  );
}

Parameters

This hook accepts no parameters.

Return Type

Returns a number representing the maximum height in pixels.

type MaxHeight = number; // Height in pixels

Example

Scrollable Container

import { useMaxHeight } from '@chatgpt-apps/sdk';

function ListWidget() {
  const maxHeight = useMaxHeight();

  return (
    <div
      style={{
        maxHeight: `${maxHeight}px`,
        overflowY: 'auto',
      }}
    >
      {items.map((item) => (
        <ListItem key={item.id} data={item} />
      ))}
    </div>
  );
}

With Tailwind CSS

import { useMaxHeight } from '@chatgpt-apps/sdk';

function StyledWidget() {
  const maxHeight = useMaxHeight();

  return (
    <div
      className="overflow-auto rounded-lg border"
      style={{ maxHeight: `${maxHeight}px` }}
    >
      <Content />
    </div>
  );
}

Dynamic Content

import { useMaxHeight } from '@chatgpt-apps/sdk';

function DynamicWidget() {
  const maxHeight = useMaxHeight();
  const headerHeight = 60;
  const footerHeight = 40;
  const contentHeight = maxHeight - headerHeight - footerHeight;

  return (
    <div className="flex flex-col">
      <header style={{ height: headerHeight }}>
        <h1>Widget Title</h1>
      </header>
      
      <main style={{ maxHeight: contentHeight, overflowY: 'auto' }}>
        <ScrollableContent />
      </main>
      
      <footer style={{ height: footerHeight }}>
        <button>Action</button>
      </footer>
    </div>
  );
}

Virtual List Optimization

import { useMaxHeight } from '@chatgpt-apps/sdk';
import { FixedSizeList } from 'react-window';

function VirtualListWidget() {
  const maxHeight = useMaxHeight();
  const itemHeight = 50;
  const itemCount = 1000;

  return (
    <FixedSizeList
      height={maxHeight}
      itemCount={itemCount}
      itemSize={itemHeight}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
}

Responsive Layout

import { useMaxHeight, useDisplayMode } from '@chatgpt-apps/sdk';

function ResponsiveWidget() {
  const maxHeight = useMaxHeight();
  const displayMode = useDisplayMode();

  // Adjust height based on display mode
  const effectiveHeight = displayMode === 'pip' 
    ? Math.min(maxHeight, 300) 
    : maxHeight;

  return (
    <div style={{ maxHeight: effectiveHeight, overflow: 'auto' }}>
      <Content />
    </div>
  );
}

Notes

The returned value is in pixels and represents the available vertical space
Always respect this height to prevent your widget from being clipped
Combine with overflow: auto or overflow-y: scroll for scrollable content
The value may change when the display mode changes or the window resizes
Use this hook in combination with useDisplayMode for optimal layout

useMaxHeight

On this page