Using your component inside a react application

[webcluster4u]

Hi,

I need to use a polycropper inside my react application. Can I use this pulgin inside a react application.

I am just using below line inside my index.html file

     <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
      <script type='text/javascript' src='http://localhost:3000/crop.js'></script>
      <style>
       canvas { box-shadow: 0 0 10px black; margin: 20px; }​
          </style>

I also put these lines inside my react componet

  return (
    <div className={classes.section}>

  <table>
<tr>
<td>
  <input type="button" id="crop" value="CROP" />
  <div id="container">
<canvas width="217" height="275" id="myCanvas" style={{position:'relative',marginLeft:'0px',marginTop:'0px'}}></canvas>
  </div>
<div id="png" style={{display:'block'}}>Click on the image sequential points forming the shape to be cropped and click on CROP button.<br/> Refresh to restart.</div>


<div id="oldposx" style={{display:'none'}}></div>
<div id="oldposy" style={{display:'none'}}></div>
<div id="posx" style={{display:'none'}}></div>
<div id="posy" style={{display:'none'}}></div>
</td><td>
  <i>HERE  APPEARS THE UPLOADED IMAGE</i>
<div id="myimg"></div><i>preview image</i>
</td>
</tr>
</table>

But it doesnt work properly, Can you guide me if I can put this inside react JSX componet?

[netplayer]

Hello,
As long my response comes too late, maybe you share your solution if any. I am sure canvas can work in a react component, but i am not that fluent in react to suggest best practice for it. Thank you.