fix: React ref methods and hotspot modal closing

dzmitry-stramavus · claude · dzmitry-stramavus · commit 32b64485abf4 · 2026-01-22T14:36:14.000+01:00
- Fix React ref methods (play/stop/etc.) not working by using getViewer()
  callback pattern to avoid stale closure capturing null viewer
- Fix hotspot modal not closing when clicking another timeline point by
  calling hidePopper() at start of animateToFrame()
- Update CodeSandbox examples to version 4.1.3

Co-Authored-By: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/codesandbox/react/package.json b/codesandbox/react/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "js-cloudimage-360-view": "4.1.2",
+    "js-cloudimage-360-view": "4.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/codesandbox/react/src/App.tsx b/codesandbox/react/src/App.tsx
@@ -171,7 +171,7 @@ export default function App() {
     <div className="app">
       <header>
         <h1>CloudImage 360 View - React</h1>
-        <p>Interactive 360-degree product viewer - Version 4.1.2</p>
+        <p>Interactive 360-degree product viewer - Version 4.1.3</p>
       </header>
 
       <main>
@@ -184,7 +184,7 @@ export default function App() {
 
       <footer>
         <a
-          href="https://github.com/niceplayer/js-cloudimage-360-view"
+          href="https://github.com/scaleflex/js-cloudimage-360-view"
           target="_blank"
           rel="noopener noreferrer"
         >
diff --git a/codesandbox/vanilla/index.html b/codesandbox/vanilla/index.html
@@ -98,7 +98,7 @@
   </head>
   <body>
     <h1>CloudImage 360 View</h1>
-    <p>Interactive 360-degree product viewer - Version 4.1.2</p>
+    <p>Interactive 360-degree product viewer - Version 4.1.3</p>
 
     <div class="examples">
       <!-- Example 1: Basic with Autoplay and Aspect Ratio -->
@@ -163,7 +163,7 @@ <h2>Programmatic Control</h2>
       </div>
     </div>
 
-    <script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/4.1.2/js-cloudimage-360-view.min.js"></script>
+    <script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/4.1.3/js-cloudimage-360-view.min.js"></script>
     <script>
       // Initialize all declarative viewers
       const ci360 = new CI360();
diff --git a/src/ci360.service.js b/src/ci360.service.js
@@ -1192,6 +1192,11 @@ class CI360Viewer {
    * @param {string} [hotspotId] - Optional hotspot ID to show popup for after animation
    */
   animateToFrame(targetFrame, hotspotId) {
+    // Close any existing hotspot popup before navigating
+    if (this.hotspotsInstance) {
+      this.hotspotsInstance.hidePopper();
+    }
+
     if (this.isAnimatingToFrame || targetFrame === this.activeImageX) {
       // If already at the target frame, just show the hotspot if requested
       if (targetFrame === this.activeImageX && hotspotId && this.hotspotsInstance && this.hotspotTimelineOnClick) {
diff --git a/src/react/CI360Viewer.tsx b/src/react/CI360Viewer.tsx
@@ -287,25 +287,27 @@ const CI360ViewerComponent: ForwardRefRenderFunction<
     ]
   );
 
-  const { viewer } = useCI360(containerRef, config);
+  const { getViewer } = useCI360(containerRef, config);
 
   // Expose imperative methods via ref
+  // Use getViewer() inside methods to always get the current viewer instance,
+  // avoiding stale closure issues when the viewer initializes after first render
   useImperativeHandle(
     ref,
     () => ({
-      moveLeft: (steps = 1) => viewer?.moveLeft(false, steps),
-      moveRight: (steps = 1) => viewer?.moveRight(false, steps),
-      moveTop: (steps = 1) => viewer?.moveTop(false, steps),
-      moveBottom: (steps = 1) => viewer?.moveBottom(false, steps),
-      play: () => viewer?.play(),
-      stop: () => viewer?.stopAutoplay(),
-      zoomIn: () => viewer?.toggleZoom(),
-      zoomOut: () => viewer?.removeZoom(),
+      moveLeft: (steps = 1) => getViewer()?.moveLeft(false, steps),
+      moveRight: (steps = 1) => getViewer()?.moveRight(false, steps),
+      moveTop: (steps = 1) => getViewer()?.moveTop(false, steps),
+      moveBottom: (steps = 1) => getViewer()?.moveBottom(false, steps),
+      play: () => getViewer()?.play(),
+      stop: () => getViewer()?.stopAutoplay(),
+      zoomIn: () => getViewer()?.toggleZoom(),
+      zoomOut: () => getViewer()?.removeZoom(),
       goToFrame: (frame: number, hotspotId?: string) =>
-        viewer?.animateToFrame(frame, hotspotId),
-      getViewer: () => viewer,
+        getViewer()?.animateToFrame(frame, hotspotId),
+      getViewer: () => getViewer(),
     }),
-    [viewer]
+    [getViewer]
   );
 
   return (
diff --git a/src/react/types.ts b/src/react/types.ts
@@ -289,6 +289,12 @@ export interface UseCI360Return {
    * Whether the viewer is ready
    */
   isReady: boolean;
+
+  /**
+   * Getter function to always get the current viewer instance.
+   * Use this in callbacks to avoid stale closure issues.
+   */
+  getViewer: () => CI360ViewerInstance | null;
 }
 
 /**
diff --git a/src/react/useCI360.ts b/src/react/useCI360.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useId, type RefObject } from 'react';
+import { useEffect, useRef, useState, useId, useCallback, type RefObject } from 'react';
 import type {
   CI360Config,
   CI360ViewerInstance,
@@ -111,9 +111,13 @@ export function useCI360(
     uniqueId,
   ]);
 
+  // Stable getter to always return current viewer (avoids stale closures)
+  const getViewer = useCallback(() => viewerRef.current, []);
+
   return {
     viewer: viewerRef.current,
     isReady,
+    getViewer,
   };
 }
 
