feat(lib): add ServerSideDocumentFallback component to support ssr frameworks like nextjs

packages/react/lib/index.ts

@@ -1,2 +1,3 @@
 export * from "./vcn";
 export * from "./Slot";
+export * from "./ssrFallback";

packages/react/lib/ssrFallback.tsx

@@ -0,0 +1,20 @@
+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 }) {
+  const [initialRender, setInitialRender] = useState<boolean>(true);
+
+  useEffect(() => {
+    setInitialRender(false);
+  }, []);
+
+  if (typeof document === "undefined" /* server side */ || initialRender)
+    return null;
+
+  return children;
+}
+
+export { ServerSideDocumentFallback };

registry.json

@@ -4,22 +4,36 @@
     "components": "/packages/react/components/{componentName}",
     "lib": "/packages/react/lib/{libName}"
   },
-  "lib": [
-    "index.ts",
-    "Slot.tsx",
-    "vcn.ts"
-  ],
+  "lib": ["index.ts", "Slot.tsx", "vcn.ts", "ssrFallback.tsx"],
   "components": {
     "button": { "type": "file", "name": "Button.tsx" },
     "checkbox": { "type": "file", "name": "Checkbox.tsx" },
-    "dialog": { "type": "dir", "name": "Dialog", "files": ["index.ts", "Component.tsx", "Context.ts"] },
+    "dialog": {
+      "type": "dir",
+      "name": "Dialog",
+      "files": ["index.ts", "Component.tsx", "Context.ts"]
+    },
     "drawer": { "type": "file", "name": "Drawer.tsx" },
     "input": { "type": "file", "name": "Input.tsx" },
     "label": { "type": "file", "name": "Label.tsx" },
     "popover": { "type": "file", "name": "Popover.tsx" },
     "switch": { "type": "file", "name": "Switch.tsx" },
-    "tabs": { "type": "dir", "name": "Tabs", "files": ["index.ts", "Context.ts", "Hook.ts", "Component.tsx"] },
-    "toast": { "type": "dir", "name": "Toast", "files": ["index.ts", "Component.tsx", "Hook.ts", "Store.ts", "Variant.ts"] },
+    "tabs": {
+      "type": "dir",
+      "name": "Tabs",
+      "files": ["index.ts", "Context.ts", "Hook.ts", "Component.tsx"]
+    },
+    "toast": {
+      "type": "dir",
+      "name": "Toast",
+      "files": [
+        "index.ts",
+        "Component.tsx",
+        "Hook.ts",
+        "Store.ts",
+        "Variant.ts"
+      ]
+    },
     "tooltip": { "type": "file", "name": "Tooltip.tsx" }
   }
-}
+}