Position QR code on Image or Pdf

I would like to have a component for React.js which places a QR-code on an invoice. The component should be able to show the invoice (pdf or image) responsive. Each processed invoice should have the position of the QR-code (X & Y coordinates). So each time the invoice is uploaded, the QR-code is placed on the correct location. This should also stay on the same location (X & Y coordinates) when resizing the screen. The QR-code should also be able to resize when I does not fit properly on the invoice. Take into account that there should be a min and max width and height of QR-code. Requirements: The component should have the following parameters: - Type (jpeg/png or pdf) - QR-code data: (should contain a link to the payment website) - QR-code size - QR-code position on the file If no coordinates are found place the QR-code at the right top with some padding (padding should be adjustable) The user can change the position of the QR-code. The QR-code can not be moved outside of the image/pdf. The QR-code should also be able to resize if it does not fit somewhere. The minimum and maximum size should be adjustable with parameters. The component should work responsive. If the page is getting smaller the QR-code should still fit on the same position.