Skip to content

Commit

Permalink
chore(docs): Suppress hydration warning for App Size
Browse files Browse the repository at this point in the history
  • Loading branch information
mlaursen committed Apr 18, 2021
1 parent 5db9a9b commit c5a08da
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 4 deletions.
14 changes: 12 additions & 2 deletions packages/documentation/src/components/Code/CodeBlock.tsx
Expand Up @@ -25,13 +25,21 @@ export default forwardRef<HTMLPreElement, CodeBlockProps>(function CodeBlock(
children: propChildren,
highlight = true,
lineNumbers = false,
suppressHydrationWarning = false,
...props
},
ref
) {
const children = useMemo(() => {
if (!highlight || typeof propChildren !== "string") {
return <Code inline={false}>{propChildren}</Code>;
return (
<Code
inline={false}
suppressHydrationWarning={suppressHydrationWarning}
>
{propChildren}
</Code>
);
}

return (
Expand All @@ -40,9 +48,11 @@ export default forwardRef<HTMLPreElement, CodeBlockProps>(function CodeBlock(
dangerouslySetInnerHTML={{
__html: highlightCode(propChildren, language),
}}
suppressHydrationWarning={suppressHydrationWarning}
/>
);
}, [propChildren, highlight, language]);
}, [highlight, propChildren, language, suppressHydrationWarning]);

return (
<pre
{...props}
Expand Down
Expand Up @@ -9,7 +9,9 @@ function CurrentSize(): ReactElement {
return (
<TextContainer>
<Text type="headline-6">The current app size is:</Text>
<CodeBlock language="json">{JSON.stringify(context, null, 2)}</CodeBlock>
<CodeBlock language="json" suppressHydrationWarning>
{JSON.stringify(context, null, 2)}
</CodeBlock>
</TextContainer>
);
}
Expand Down
Expand Up @@ -40,7 +40,7 @@ export default function ResizeListenerExample(): ReactElement {
/>
)}
<Text>The current app size is:</Text>
<CodeBlock>{size}px</CodeBlock>
<CodeBlock suppressHydrationWarning>{size}px</CodeBlock>
</>
);
}

0 comments on commit c5a08da

Please sign in to comment.