QRCode with LWC in Salesforce

Hello Geeks, I was working on the generation of QRCode in LWC which is the new feature of Salesforce from the Spring '19 release. We all use the APIs for this purpose as they are very simple and easy to implement. I too did the same for the generation of QR codes in my LWC Component. But what if they get deprecated..? So, for solving this I tried creating ES6 code for the generation of QR-Code in the Salesforce Lightning Web Components.

You just need to pass a String for which the QR-Code will be generated and will be displayed on the UI of your component.

These are the following simple steps through which you can generate the QR-Code.

  1. Create an LWC component.
  2. Add a module to the component named qrcode.js in the same folder of your LWC component. Paste the below code in a qrcode.js file-copy the qrcode.js file from GitHub (https://github.com/shivanirathi21/LWC-QRCode) file qrcode.js (https://github.com/shivanirathi21/LWC-QRCode/blob/master/qrcode.js)
  3. Import the Module added in the components .js file to your components js file as shown in the below snippet.
    Import module from component
  4. Now, at last add the below code to your HTML file
    creating QR-Code in lightning component

There you go... You have successfully created the QR-Code in your LWC component.

The complete code can be referred from Github (https://github.com/shivanirathi21/LWC-QRCode)

Popular Salesforce Blogs