Best way to draw rectangles via mouse drag in React.js?

Question

I'm trying to highlight areas of an image like how you would on your mac or windows by dragging an area with the mouse in a React.js application.

I understand this would be best done on Canvas, by overlaying the canvas over the image, and then catch the mouse events and drawing the rectangle accordingly, is there a good library or something to do this? because writing raw code to implement this seem to be reinventing the wheel.

Thanks in advance.

Answer 1

There are some libraries .

you can choose https://daybrush.com/scena/

and some paid libraries

Answer 2

Not sure if this is enough to warrant a full answer but I ran into a similar situation and this library is the best I could find:

react-sketch

Admittedly though it seems the maintainer is very unresponsive/not maintaining the package which is a bit concerning.

Hope this helps :)