fix: make ssrFallback take callback as children

pswui · Jul 19, 2024 · 9113b8e · 9113b8e
1 parent 13cc43d
commit 9113b8e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/react/lib/ssrFallback.tsx b/packages/react/lib/ssrFallback.tsx
@@ -4,7 +4,9 @@ import { type ReactNode, useEffect, useState } from "react";
  * This component allows components to use `document` as like they're always in the client side.
  * Return null if there is no `document` (which represents it's server side) or initial render(to avoid hydration error).
  */
-function ServerSideDocumentFallback({ children }: { children: ReactNode }) {
+function ServerSideDocumentFallback({
+  children,
+}: { children: () => ReactNode }) {
   const [initialRender, setInitialRender] = useState<boolean>(true);
 
   useEffect(() => {
@@ -14,7 +16,7 @@ function ServerSideDocumentFallback({ children }: { children: ReactNode }) {
   if (typeof document === "undefined" /* server side */ || initialRender)
     return null;
 
-  return children;
+  return children();
 }
 
 export { ServerSideDocumentFallback };
diff --git a/packages/react/lib/withSSD.tsx b/packages/react/lib/withSSD.tsx
@@ -7,7 +7,7 @@ function withServerSideDocument<P extends {}>(
   const SSDocumentFallbackWrapper = (props: P) => {
     return (
       <ServerSideDocumentFallback>
-        <Component {...props} />
+        {() => <Component {...props} />}
       </ServerSideDocumentFallback>
     );
   };