javascript - how to convert react component to a jpg image?

Question

i want to convert my react component into jpg image , so that user can download it. my component has a qr code section so i want users to download my qrcode component.

 <div className='QRComponent'>
         <div className='QRComponentTop'>
            <h3>Checkout Our Website</h3>
          
         </div>
        <div className='QRComponentQR'>
        <p>Scan QR to check our Website</p>
          <QRCode  ref={ref} logoWidth={70} logoHeight={70} logoImage='https://i.ibb.co/TbGQWXh/*****-Logo-3-4-removebg-preview.png' value={`${user_details.business  ? `https://*****.in/${user_details?.business.toUpperCase()}` : 'https://*****.in'}`} />
        </div>
        <div className='QRComponentBottom'>
            <h3>{user_details?.business}</h3>
            <h4>******.in/{user_details?.business}</h4>
            <div className='QRComponentBottom--logo'>
                <img src='https://i.ibb.co/TbGQWXh/******-Logo-3-4-removebg-preview.png'/>
                <h2>*****</h2>
            </div>
        </div>
        
        </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

question from:https://stackoverflow.com/questions/65652058/how-to-convert-react-component-to-a-jpg-image

Answer 1

Waitting for answers