From e2240fa780af88be0b6f5dfcbc3098d0e1e50686 Mon Sep 17 00:00:00 2001
From: Nisharg Shah <nishargshah3101@gmail.com>
Date: Sun, 6 Mar 2022 03:02:52 +0530
Subject: [PATCH] next.js onLoad problem fixed

---
 package.json        |  2 +-
 src/ImageMapper.tsx | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 70ae518..4ff0c37 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-img-mapper",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "React Component to highlight interactive zones in images",
   "keywords": [
     "react",
diff --git a/src/ImageMapper.tsx b/src/ImageMapper.tsx
index db8dd72..a48603b 100644
--- a/src/ImageMapper.tsx
+++ b/src/ImageMapper.tsx
@@ -52,6 +52,13 @@ const ImageMapper: React.FC<ImageMapperProps> = (props: ImageMapperProps) => {
   const ctx = useRef<CanvasRenderingContext2D>(null);
   const isInitialMount = useRef<boolean>(true);
 
+  useEffect(() => {
+    initCanvas(true);
+    ctx.current = canvas.current.getContext('2d');
+    updateCacheMap();
+    setRendered(true);
+  }, []);
+
   useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
@@ -62,12 +69,6 @@ const ImageMapper: React.FC<ImageMapperProps> = (props: ImageMapperProps) => {
     }
   }, [props, isInitialMount, imgRef]);
 
-  useEffect(() => {
-    ctx.current = canvas.current.getContext('2d');
-    updateCacheMap();
-    setRendered(true);
-  }, []);
-
   useEffect(() => {
     container.current.clearHighlightedArea = () => {
       setMap(storedMap);
@@ -293,7 +294,6 @@ const ImageMapper: React.FC<ImageMapperProps> = (props: ImageMapperProps) => {
         useMap={`#${map.name}`}
         alt="map"
         ref={img}
-        onLoad={() => initCanvas(true)}
         onClick={event => imageClick(event, props)}
         onMouseMove={event => imageMouseMove(event, props)}
       />