React

[antonydellavecchia]

Has anyone been able to get this working with react? I am just migrate my project to react now and having some trouble getting this to work.

[davidjbradshaw]

I don’t think this will work in React in it’s current form, but now you have me thinking what a React version would look like. I will give it some thought over the weekend

[antonydellavecchia]

got it to work, just render the html area map like you normally would, import imageMapResize from 'image-map-resizer' and call imageMapResize inside componentDidMount() makes sense aha,

[mritunjayupadhyay]

I have done the as @antonydellavecchia but I am getting an error ReferenceError: window is not defined at /something/node_modules/image-map-resizer/js/imageMapResizer.min.js:7:1833

[jdejesus001]

One additional thing I had to do (in addition to what @antonydellavecchia said is add the following eslint rule:

/* eslint no-undef: "off"*/ 

[iACM1994]

Hi @jdejesus001 , Where should I add that rule? I'm also facing the same error as miritun when refresh page. I'm using nextjs, typescript.

[davidjbradshaw]

Would be easier to set the esLint environment to browser

{
  "env": {
    "browser": true
  }
}

[jdejesus001]

I added the rule on line 147 of the ImageMapResizer file:

 /* eslint no-undef: "off"*/
  if (typeof define === 'function' && define.amd) {
    define([], factory)
  } else if (typeof module === 'object' && typeof module.exports === 'object') {
    module.exports = factory() //Node for browserfy
  } else {
    window.imageMapResize = factory()
  }

[jdejesus001]

Nice job btw David. I have this working perfectly in React.

[panzerstadt]

for those doing it in nextjs, this worked for me:

useEffect(() => {
    import("image-map-resizer").then((module) => module.default());
  }, []);