ssr friendly height computation

Author: shettypuneeth

src/StackedCarousel.jsx

@@ -1,8 +1,8 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { useCardStackCarousel } from "./useCardStackCarousel";
 import CarouselItem from "./CarouselItem";
 import Navigation from "./Navigation";
-import { getRootHeight } from "./getRootHeight";
+import { useRootHeight } from "./useRootHeight";
 
 export function StackedCarousel(props) {
     const {
@@ -32,6 +32,7 @@ export function StackedCarousel(props) {
         transitionDuration,
         verticalOffset,
     });
+    const rootHeight = useRootHeight(height);
 
     const renderCards = () => {
         return React.Children.map(children, (child, index) => {
@@ -50,7 +51,6 @@ export function StackedCarousel(props) {
     };
 
     const { Root } = styleOverrides;
-    const rootHeight = useMemo(() => Number(getRootHeight(height)), [height]);
     const styles = Object.assign({}, Root, { height: rootHeight });
 
     return (

src/getRootHeight.js src/useRootHeight.jssrc/getRootHeight.js renamed to src/useRootHeight.js

@@ -1,3 +1,9 @@
+import { useLayoutEffect, useEffect, useState } from "react";
+
+// SSR support
+const useIsomorphicLayoutEffect =
+    typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
 const BREAKPOINTS = [
     { name: "2xl", value: 1536 },
     { name: "xl", value: 1280 },
@@ -6,7 +12,7 @@ const BREAKPOINTS = [
     { name: "sm", value: 640 },
 ];
 
-export const getRootHeight = (heightProp) => {
+const getRootHeight = (heightProp) => {
     if (!heightProp) {
         throw new Error("'height' prop is required");
     }
@@ -37,3 +43,14 @@ export const getRootHeight = (heightProp) => {
         throw new Error(`Invalid height prop: ${heightProp}`);
     }
 };
+
+export const useRootHeight = (heightProp) => {
+    const [height, setHeight] = useState(0);
+
+    useIsomorphicLayoutEffect(() => {
+        const height = Number(getRootHeight(heightProp));
+        setHeight(height);
+    }, [heightProp]);
+
+    return height;
+};