Merge pull request #339 from rpearce/fix/ssr

Fix SSR hydration issue by moving ID generation to after mount

.all-contributorsrc

@@ -536,7 +536,8 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/31321188?v=4",
       "profile": "https://github.com/remorses",
       "contributions": [
-        "doc"
+        "doc",
+        "bug"
       ]
     }
   ],

CHANGELOG.md

@@ -1,9 +1,16 @@
 # Changelog
+
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [5.0.1] - 2022-08-04
+
+### Fixed
+
+* React hydration issue (#338)
+
 ## [5.0.0] - 2022-08-03
 
 Closes #164, #166, #213, #227, #259, #265, #281, #282

README.md

@@ -320,8 +320,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://thedveloper.com/"><img src="https://avatars.githubusercontent.com/u/10765364?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Christian Guevara</b></sub></a><br /><a href="#question-christianguevara" title="Answering Questions">💬</a></td>
     <td align="center"><a href="https://github.com/johanbook"><img src="https://avatars.githubusercontent.com/u/13253042?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Johan Book</b></sub></a><br /><a href="https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Ajohanbook" title="Bug reports">🐛</a></td>
     <td align="center"><a href="http://dibellopaolo-portfolio-demo-1.rf.gd/"><img src="https://avatars.githubusercontent.com/u/36816681?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Paolo Di Bello</b></sub></a><br /><a href="#ideas-PaoloDiBello" title="Ideas, Planning, & Feedback">🤔</a></td>
-    <td align="center"><a href="https://github.com/remorses"><img src="https://avatars.githubusercontent.com/u/31321188?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tommaso De Rossi</b></sub></a><br /><a href="https://github.com/rpearce/react-medium-image-zoom/commits?author=remorses" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/romanown"><img src="https://avatars.githubusercontent.com/u/7169357?v=4?s=100" width="100px;" alt=""/><br /><sub><b>roman</b></sub></a><br /><a href="https://github.com/rpearce/react-medium-image-zoom/commits?author=romanown" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/remorses"><img src="https://avatars.githubusercontent.com/u/31321188?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tommaso De Rossi</b></sub></a><br /><a href="https://github.com/rpearce/react-medium-image-zoom/commits?author=remorses" title="Documentation">📖</a> <a href="https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Aremorses" title="Bug reports">🐛</a></td>
   </tr>
 </table>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-medium-image-zoom",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "license": "BSD-3-Clause",
   "description": "Accessible medium.com-style image zoom for React",
   "type": "module",

source/Controlled.tsx

@@ -1,11 +1,11 @@
 import React, {
-  Component,
-  createRef,
   CSSProperties,
+  Component,
   ElementType,
   ImgHTMLAttributes,
   KeyboardEvent,
   ReactNode,
+  createRef,
 } from 'react'
 
 import type { SupportedImage } from './types'
@@ -60,10 +60,11 @@ interface ControlledDefaultProps {
 type ControlledPropsWithDefaults = ControlledDefaultProps & ControlledProps
 
 interface ControlledState {
-  shouldRefresh: boolean
+  id: string,
   isZoomImgLoaded: boolean
   loadedImgEl: HTMLImageElement | undefined
   modalState: ModalState
+  shouldRefresh: boolean
 }
 
 class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledState> {
@@ -76,10 +77,11 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
   }
 
   state: ControlledState = {
-    shouldRefresh: false,
+    id: '',
     isZoomImgLoaded: false,
     loadedImgEl: undefined,
     modalState: ModalState.UNLOADED,
+    shouldRefresh: false,
   }
 
   private refContent = createRef<HTMLDivElement>()
@@ -90,14 +92,12 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
   private imgEl: SupportedImage | null = null
   private imgElObserver: ResizeObserver | undefined
   private styleModalImg: CSSProperties = {}
-  private idModalImg = `rmiz-modal-img-${Math.random().toString(16).slice(-4)}`
 
   render() {
     const {
-      handleUnzoom,
       handleDialogKeyDown,
+      handleUnzoom,
       handleZoom,
-      idModalImg,
       imgEl,
       props: {
         a11yNameButtonUnzoom,
@@ -114,13 +114,16 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
       refModalImg,
       refWrap,
       state: {
-        shouldRefresh,
+        id,
         isZoomImgLoaded,
         loadedImgEl,
         modalState,
+        shouldRefresh,
       },
     } = this
 
+    const idModalImg = `rmiz-modal-img-${id}`
+
     // =========================================================================
 
     const isDiv = testDiv(imgEl)
@@ -238,6 +241,7 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
   // ===========================================================================
 
   componentDidMount() {
+    this.setId()
     this.setAndTrackImg()
     this.handleImgLoad()
     this.UNSAFE_handleSvg()
@@ -260,6 +264,13 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
     this.handleIfZoomChanged(prevProps.isZoomed)
   }
 
+  // ===========================================================================
+  // Because of SSR, set a unique ID after render
+
+  setId = () => {
+    this.setState({ id: Math.random().toString(16).slice(-4) })
+  }
+
   // ===========================================================================
   // Find and set the image we're working with