How can I use this in React JS?

[clarketm]

How can I use this in React JS?

[ctrljs]

So I just add the 'ImageMap('img[usemap]')' on mount of any components I want to use it in? Ok I will give it a try. Thank you for your quick feedback.

[ctrljs]

Adding the timeOut did the trick, It's working on load now and within navigation between routes. The problem must be the race as you pointed out.

Thank you very much for suggesting the solution and the time, appreciate it.

[clarketm]

There is not a React version, but you should be able to import this library then execute the ImageMap(...) in your React component:

e.g.

import ImageMap from "image-map";

...
componentDidMount() {
  ImageMap('img[usemap]')
}
...

[ctrljs]

For testing I added this code in 2 components with image maps on two routes, It is working on first route component on load, and then I navigate to other route component using react router dom (history.push), it is not working there at first. But when I resize the browser window, it start working on that component.

After That It works fine on both components smoothly,while navigating between then. Any Guesses what could be wrong

import ImageMap from 'image-map'; ... useEffect(() => { ImageMap('img[usemap]'); }, []);

this code on both components

[clarketm]

I am not certain off the top of my head. Can you capture the return value of ImageMap('img[usemap]'); and log it out to see if has any selectors. Also, check the <area> tags to see if they have the data-coords attribute.

Also, I am not familiar with useEffect, I presume it mimics the behavior of componentDidMount in that it waits for the DOM to be ready and executes once?

[ctrljs]

I logged the return value of ImageMap, it has a selector node, for that img tag, and it is reffereing the correct image on that component.
in console

ImageMap {selector: NodeList(1)}
selector: NodeList(1)
0: img
accessKey: ""
align: ""
alt: ""
currentSrc: "http://localhost:3000/lobby.jpg"

coords mentioned in below way in code , is it to given as data-coords??

  <area
          target=""
          alt="Back"
          title="Back"
          style={{ cursor: 'pointer' }}
          onClick={() => {
            history.push('/');
          }}
          coords="312,129,470,162"
          shape="rect"
        />

yes in a functional component for react , useEffect with a [] at end mimics componentdidmount and executes only once

[clarketm]

I logged the return value of ImageMap, it has a selector node, for that img tag, and it is reffereing the correct image on that component.
in console

Is this the output when you navigate to the 2nd route for the first time (i.e. when you said it is not working)? It looks like there is a selector which is a good sign.

coords mentioned in below way in code , is it to given as data-coords??

No in the DOM itself. Sorry I should have clarified, when ImageMap() is executed it recalculates the coords value (and on resize) but stores the original coords in the data-coords attribute. So, if this is set then it means the constructor has run.

yes in a functional component for react , useEffect with a [] at end mimics componentdidmount and executes only once

Thanks for clarifying. I have not used React in over a year; it changes fast!

[clarketm]

When you say :

... it is not working there at first. But when I resize the browser window, it start working on that component.

What exactly do you mean by "not working"? Technically, all ImageMap() does is make the map's
area tags dynamic so they scale as the screen resizes ... but it should also initialize the coords to the correct scale on load (i.e. when first called) which might not be happening.

[ctrljs]

Is this the output when you navigate to the 2nd route for the first time (i.e. when you said it is not working)?

Yes it is when I navigate to the 2nd Route, I can see the selector in console. But I can get click functionality only if I resize the main browser window, then it kicks into action, it is not working on load.

---

In the DOM I can see the data-coords attribute on area tag, in elements

<area target="" alt="Back" title="Back" coords="160.0857142857143,0,241.1547619047619,0" shape="rect" style="cursor: pointer;" data-coords="312,129,470,162">

" but it should also initialize the coords to the correct scale on load (i.e. when first called) which might not be happening."

Yes I think it is not happening on component load.

[ctrljs]

One more thing it works on First Route Directly, No Resize required. It just works fine, Only when I first navigate to the second route that it doesn't work on load.

And After that if I go back to first route and then to second again, it is working on the load itself.

[clarketm]

There may be a race between the React Router transition and the call to ImageMap(). It is strange because the calculated coords you posted have y (i.e. height) values of zero which would explain why the image map is not clickable:

coords: 160.0857142857143 0 241.1547619047619 0

TBH, I know nothing about React Router. First, can you try wrapping the constructor call in a setTimeout to verify this?:

useEffect(() => { 
  setTimeout(() => ImageMap('img[usemap]'), 1000);
}, []);

Also, what version of ImageMap are you using?