3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-24 21:48:02 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix: restore duplicate Tabs rendering to fix hydration issue (#5652)

Browse source 
* restore duplicate Tabs rendering to fix hydration issue

* comment
This commit is contained in:
Sébastien Lorber 2021-10-07 12:40:19 +02:00 • committed by GitHub
parent 03eda3e04e
commit e1b4da04fe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

15
packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
View file

@ -6,6 +6,7 @@
*/ */
import React, {useState, cloneElement, Children, ReactElement} from 'react'; import React, {useState, cloneElement, Children, ReactElement} from 'react';
import useIsBrowser from '@docusaurus/useIsBrowser';
import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext'; import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
import type {Props} from '@theme/Tabs'; import type {Props} from '@theme/Tabs';
import type {Props as TabItemProps} from '@theme/TabItem'; 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; return top >= 0 && right <= innerWidth && bottom <= innerHeight && left >= 0;
} }
function Tabs(props: Props): JSX.Element { function TabsComponent(props: Props): JSX.Element {
const { const {
lazy, lazy,
block, 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 (
<TabsComponent
// Remount tabs after hydration
// Temporary fix for https://github.com/facebook/docusaurus/issues/5653
key={String(isBrowser)}
{...props}
/>
);
}

22
website/_dogfooding/_pages tests/tabs-tests.mdx Normal file
View file

@ -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');
<BrowserWindow>
<Tabs defaultValue={isMacOS ? "ios" : "android"}>
<TabItem value="android" label="Android">Android content</TabItem>
<TabItem value="ios" label="iOS">iOS content</TabItem>
</Tabs>
</BrowserWindow>
```