MCP Apps Kit - v0.5.0
    Preparing search index...

    Function useIntrinsicHeight

    • Hook to notify host of widget's intrinsic height (ChatGPT only)

      Automatically reports height changes to prevent scroll clipping. Returns a ref to attach to your root element for automatic height tracking, or a manual notify function for custom height reporting.

      Returns {
          containerRef: RefObject<HTMLElement>;
          isSupported: boolean;
          notify: (height: number) => void;
      }

      Ref for auto-tracking and manual notify function

      • containerRef: RefObject<HTMLElement>

        Ref to attach to container for automatic height tracking

      • isSupported: boolean

        Whether intrinsic height notification is supported

      • notify: (height: number) => void

        Manually notify host of height

      // Automatic height tracking
      function AutoHeightWidget() {
      const { containerRef, isSupported } = useIntrinsicHeight();

      return (
      <div ref={containerRef}>
      <p>Content that may change height...</p>
      </div>
      );
      }

      // Manual height notification
      function ManualHeightWidget() {
      const { notify, isSupported } = useIntrinsicHeight();

      useEffect(() => {
      // Notify after content loads
      notify(500);
      }, [notify]);

      return <div style={{ height: 500 }}>Fixed height content</div>;
      }