I would like to use this JQuery plugin inside of my React App: https://github.com/websanova/wScratchPad

I tried writing a src element in jsx and this is not allowed. I then imported $ from jquery but it says the wScratchPad function is not defined which makes perfect sense, how do I define this function/where should I import it from?

<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>

This is what it looks like in html, and it works perfectly fine. How do I get it into react?

{$('#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);
          }
        })}

I want to get something like this inside of react.

Maybe someone knows of a scratch-pad esque component native to react?

Thanks