How to render QR code at center of the div in React platform

2 mins read

This article explains how to render a QR code at the center of a div in the React platform. Syncfusion JavaScript Barcode control allows you to easily generate a QR code in your application.

To render QR code at center of the div, we need to follow the below steps.

Step 1: Create QR Code using QrCodeGenerator

You can use the Syncfusion Barcode control’s QRCodeGenerator to generate a QR code.

Step 2: Add style to div

To center the QR Code add style to the div

.element {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

Refer the code snippet below

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>Syncfusion React QR Code</title>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="Essential JS 2 for React Components" />
   <meta name="author" content="Syncfusion" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>

   <script src="systemjs.config.js"></script>
   <style>
     .barcodeStyle {
       height: 400px;
       width: 400px;
       background-color: #acf1e9;
       position: absolute;
     }
     .element {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
     }
   </style>
 </head>
 <body style="margin-top: 100px">
   <div id="container" class="barcodeStyle">
     <div id="barcode" class="element"></div>
   </div>
 </body>
</html>

Refer to the working sample for additional details and implementation: Click here for sample

Did you find this information helpful?

Yes

Comments (0)

How to render QR code at center of the div in React platform

Access denied