Update sandpack ssr

This commit is contained in:
DefectingCat
2022-06-21 10:12:21 +08:00
parent 7a23665bad
commit 787fc77ba4
2 changed files with 11 additions and 11 deletions

View File

@ -1,6 +1,5 @@
import { Sandpack, SandpackProps } from '@codesandbox/sandpack-react';
import { Sandpack, SandpackProps } from '@codesandbox/sandpack-react';
import { useTheme } from 'next-themes';
import useInView from 'lib/hooks/useInView';
interface Props extends SandpackProps {}
@ -8,17 +7,13 @@ const RUASandpack = ({ ...rest }: Props) => {
const { systemTheme, theme } = useTheme();
const currentTheme = theme === 'system' ? systemTheme : theme;
const { ref, inView } = useInView();
return (
<>
<div className="my-2 min-h-[402px]" ref={ref}>
{inView && (
<Sandpack
{...rest}
theme={currentTheme === 'dark' ? 'dark' : 'light'}
/>
)}
<div className="my-2 min-h-[402px]">
<Sandpack
{...rest}
theme={currentTheme === 'dark' ? 'dark' : 'light'}
/>
</div>
</>
);

View File

@ -1,4 +1,5 @@
import { Head, Html, Main, NextScript } from 'next/document';
import { getSandpackCssText } from '@codesandbox/sandpack-react';
export default function Document() {
return (
@ -15,6 +16,10 @@ export default function Document() {
href="https://ZUYZBUJBQW-dsn.algolia.net"
crossOrigin=""
/>
<style
dangerouslySetInnerHTML={{ __html: getSandpackCssText() }}
id="sandpack"
/>
</Head>
<body>
<Main />