qr-code

Simple vanilla HTML QR Code element with no dependencies.

Usage

Include the javascript file in your HTML file. You can then use the <qr-code> custom element.

<script src="https://unpkg.com/@lnsy/qr-code/dist/qr-code.min.js"></script>
<qr-code value="cool url link here"></qr-code>

Or install with npm:

npm i @lnsy/qr-code --save

and import:

import "@lnsy/qr-code";

// Create the element
const qrCode = document.createElement('qr-code');

// Set the value to encode
qrCode.setAttribute('value', 'https://lindseymysse.com');

// Optionally, set the size
qrCode.setAttribute('size', '256');

// Add it to the DOM
document.body.appendChild(qrCode);

Attributes

• value: The string to encode in the QR code. If not provided, it will default to the current page's URL.
• size: The width and height of the QR code in pixels. The default is 1024.

Example with size attribute:

<qr-code value="This will be a smaller QR code" size="256"></qr-code>

Some Caveats: You cannot store a string longer than 1024 characters

Prior work:

• https://github.com/kazuhikoarase/qrcode-generator
• https://github.com/davidshimjs/qrcodejs

Github

https://github.com/lnsy-dev/qr-code-element

Hire Me

I am available for contracts, remote or on site in Los Angeles!

https://lindseymysse.com