{"record":{"id":"d5ec668a5e971c13","repo":"facebook/docusaurus","slug":"usetabscontext-must-be-used-within-a-tabs-compon","errorCode":null,"errorMessage":"useTabsContext() must be used within a Tabs component","messagePattern":"useTabsContext\\(\\) must be used within a Tabs component","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/docusaurus-theme-common/src/utils/tabsUtils.tsx","lineNumber":297,"sourceCode":"    },\n    [setQueryString, setStorageValue, tabValues],\n  );\n\n  return {\n    selectedValue,\n    selectValue,\n    tabValues,\n    lazy: props.lazy ?? false,\n    block: props.block ?? false,\n  };\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nexport function useTabs(): TabsContextValue {\n  const contextValue = React.useContext(TabsContext);\n  if (!contextValue) {\n    throw new Error('useTabsContext() must be used within a Tabs component');\n  }\n  return contextValue;\n}\n\nexport function TabsProvider(props: {\n  children: ReactNode;\n  value: TabsContextValue;\n}): ReactNode {\n  return (\n    <TabsContext.Provider value={props.value}>\n      {props.children}\n    </TabsContext.Provider>\n  );\n}\n","sourceCodeStart":279,"sourceCodeEnd":312,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/packages/docusaurus-theme-common/src/utils/tabsUtils.tsx#L279-L312","documentation":"useTabs() reads the TabsContext created by <Tabs>/TabsProvider. React.useContext returns null when the hook is called from a component that is not a descendant of a TabsProvider, and the guard throws 'useTabsContext() must be used within a Tabs component'. This is the standard React 'missing provider' failure.","triggerScenarios":"Call useTabs() in a component rendered outside <Tabs>; use it in a unit test without wrapping in TabsProvider; lift a TabItem-child component above the <Tabs> boundary during refactor.","commonSituations":"Extracting an inline child into a standalone component placed at the wrong level; RTL/Jest tests of a tab-aware component without the provider; reordering JSX so the consumer renders before/above <Tabs>.","solutions":["Move the component calling useTabs() to be a descendant of <Tabs>.","In tests, render the consumer inside <TabsProvider value={...}> or a real <Tabs>.","Pass the needed value via props instead of context if the component must live outside the Tabs tree."],"exampleFix":"// before\nfunction TabLabel() {\n  const {selectedValue} = useTabs(); // rendered outside <Tabs>\n  return <b>{selectedValue}</b>;\n}\n<TabLabel />\n<Tabs>...</Tabs>\n// after\n<Tabs>\n  <TabLabel />\n</Tabs>","handlingStrategy":"type-guard","validationCode":null,"typeGuard":null,"tryCatchPattern":"// In a custom hook used in non-Tabs contexts\nimport {useTabs} from '@docusaurus/theme-common/internal';\n\nfunction useTabsOptional() {\n  try {\n    return useTabs();\n  } catch {\n    return null; // caller falls back to props\n  }\n}","preventionTips":["Keep useTabs consumers physically nested inside <Tabs> in JSX.","In tests, wrap the consumer in <Tabs> or <TabsProvider value={...}>.","Prefer passing data via props when a component must render outside Tabs."],"tags":["react","context","tabs","hooks"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}