@navikt/ds-react/src/tabs/parts/tabpanel/useTabPanel.ts

React components from the Norwegian Labour and Welfare Administration.

import { useTabsContext } from "../../Tabs.context";

type TabPanelProps = {
  value: string;
};

/**
 * Tabs hook for managing the visible/hidden state of Tabs.Panel
 */
export function useTabPanel({ value }: TabPanelProps) {
  const { id, selectedValue, makeTabId, makeTabPanelId } = useTabsContext();

  return {
    labelledbyId: makeTabId(id, value),
    hidden: selectedValue !== value,
    id: makeTabPanelId(id, value),
  };
}