Skip to main content
react-md

useMaxTabPanelHeight 

function useMaxTabPanelHeight<E extends HTMLElement = HTMLDivElement>(
  options: MaxTabPanelHeightOptions<E>
): MaxTabPanelHeightImplementation<E>;

The useMaxTabPanelHeight hook is used to create static heights for tab panels that are rendered within the page to prevent layout shifts of content below the tab panels.

See the Use Max Tab Panel Height Demo for a working example.

Example Usage

import { Tab } from "@react-md/core/tabs/Tab";
import { TabList } from "@react-md/core/tabs/TabList";
import { useMaxTabPanelHeight } from "@react-md/core/tabs/useMaxTabPanelHeight";
import { useTabs } from "@react-md/core/tabs/useTabs";
import { Slide } from "@react-md/core/transition/Slide";
import { SlideContainer } from "@react-md/core/transition/SlideContainer";
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

function Example(): ReactElement {
  const { getTabProps, getTabListProps, getTabPanelProps, getTabPanelsProps } =
    useTabs();
  const { getMaxTabPanelHeightProps } = useMaxTabPanelHeight({
    getTabPanelsProps,
  });

  return (
    <>
      <TabList {...getTabListProps()}>
        <Tab {...getTabProps(0)}>Tab 1</Tab>
        <Tab {...getTabProps(1)}>Tab 2</Tab>
        <Tab {...getTabProps(2)}>Tab 3</Tab>
      </TabList>
      <SlideContainer {...getMaxTabPanelHeightProps()}>
        <Slide {...getTabPanelProps(0)}>
          <Tab1Content />
        </Slide>
        <Slide {...getTabPanelProps(1)}>
          <Tab2Content />
        </Slide>
        <Slide {...getTabPanelProps(2)}>
          <Tab3Content />
        </Slide>
      </SlideContainer>
    </>
  );
}

Parameters

export interface MaxTabPanelHeightOptions<E extends HTMLElement>
  extends Pick<TabsImplementation, "getTabPanelsProps"> {
  ref?: Ref<E>;
  style?: CSSProperties;

  /**
   * @defaultValue `undefined`
   */
  defaultHeight?: UseStateInitializer<string | number>;
}

Returns

An object with the following definition:

export interface MaxTabPanelHeightImplementation<E extends HTMLElement> {
  getMaxTabPanelHeightProps: (
    style?: CSSProperties
  ) => ProvidedMaxTabPanelsHeightProps<E>;
}

export interface ProvidedMaxTabPanelsHeightProps<E extends HTMLElement> {
  ref: Ref<E>;
  direction: SlideDirection;
  style: CSSProperties;
}