diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx index 4c56b2e9a7..13ea03591d 100644 --- a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx @@ -6,6 +6,7 @@ */ import React, {useState, cloneElement, Children, ReactElement} from 'react'; +import useIsBrowser from '@docusaurus/useIsBrowser'; import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext'; import type {Props} from '@theme/Tabs'; import type {Props as TabItemProps} from '@theme/TabItem'; @@ -21,7 +22,7 @@ function isInViewport(element: HTMLElement): boolean { return top >= 0 && right <= innerWidth && bottom <= innerHeight && left >= 0; } -function Tabs(props: Props): JSX.Element { +function TabsComponent(props: Props): JSX.Element { const { lazy, block, @@ -163,4 +164,14 @@ function Tabs(props: Props): JSX.Element { ); } -export default Tabs; +export default function Tabs(props: Props): JSX.Element { + const isBrowser = useIsBrowser(); + return ( + + ); +} diff --git a/website/_dogfooding/_pages tests/tabs-tests.mdx b/website/_dogfooding/_pages tests/tabs-tests.mdx new file mode 100644 index 0000000000..af7dd77e12 --- /dev/null +++ b/website/_dogfooding/_pages tests/tabs-tests.mdx @@ -0,0 +1,22 @@ +# Tabs tests + +```mdx-code-block +import BrowserWindow from '@site/src/components/BrowserWindow'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +``` + +## Tabs with dynamic default value + +This can cause [bugs](https://github.com/facebook/react-native-website/issues/2771) when default value is different between SSR and client: + +```mdx-code-block +export const isMacOS = typeof window !== 'undefined' && navigator.platform.startsWith('Mac'); + + + + Android content + iOS content + + +```