feat(react): ssr

packages/react/src/components/Nodes/wrapNode.tsx

@@ -52,6 +52,8 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     disableKeyboardA11y,
     ariaLabel,
     rfId,
+    dimensionWidth,
+    dimensionHeight,
   }: WrapNodeProps) => {
     const store = useStoreApi();
     const nodeRef = useRef<HTMLDivElement>(null);
@@ -181,7 +183,9 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
           zIndex,
           transform: `translate(${xPosOrigin}px,${yPosOrigin}px)`,
           pointerEvents: hasPointerEvents ? 'all' : 'none',
-          visibility: initialized ? 'visible' : 'visible',
+          visibility: initialized ? 'visible' : 'hidden',
+          width: dimensionWidth,
+          height: dimensionHeight,
           ...style,
         }}
         data-id={id}

packages/react/src/components/ReactFlowProvider/index.tsx

@@ -6,11 +6,23 @@ import { Provider } from '../../contexts/RFStoreContext';
 import { createRFStore } from '../../store';
 import type { ReactFlowState, Node, Edge } from '../../types';
 
-function ReactFlowProvider({ children, nodes, edges }: { children: ReactNode; nodes?: Node[]; edges?: Edge[] }) {
+function ReactFlowProvider({
+  children,
+  nodes,
+  edges,
+  width,
+  height,
+}: {
+  children: ReactNode;
+  nodes?: Node[];
+  edges?: Edge[];
+  width?: number;
+  height?: number;
+}) {
   const storeRef = useRef<UseBoundStoreWithEqualityFn<StoreApi<ReactFlowState>> | null>(null);
 
   if (!storeRef.current) {
-    storeRef.current = createRFStore({ nodes, edges });
+    storeRef.current = createRFStore({ nodes, edges, width, height });
   }
 
   return <Provider value={storeRef.current}>{children}</Provider>;