Me gustaría usar este complemento JQuery dentro de mi aplicación React: https://github.com/websanova/wScratchPad

Intenté escribir un elemento src en jsx y esto no está permitido. Luego importé $ de jquery pero dice que la función wScratchPad no está definida, lo que tiene mucho sentido, ¿cómo defino esta función/desde dónde debo importarla?

 <script type="text/javascript" src="./wScratchPad.min.js"></script> <script type="text/javascript"> $('#demo1').wScratchPad({ size:30, bg: './images/winner.png', fg: './images/fg.png', 'cursor': 'url("./cursors/coin.png") 5 5, default', scratchMove: function (e, percent) { $('#demo1-percent').html(percent); } }); </script>

Así es como se ve en html, y funciona perfectamente bien. ¿Cómo hago para que reaccione?

 {$('#demo1').wScratchPad({ size:30, bg: './images/winner.png', fg: './images/lottery.png', 'cursor': 'url("./cursors/sol.png") 5 5, default', scratchMove: function (e, percent) { $('#demo1-percent').html(percent); } })}

Quiero obtener algo como esto dentro de reaccionar.

¿Quizás alguien sabe de un componente de scratch-pad esque nativo para reaccionar?

Gracias