Skip to content

README.md

Latest commit

 

History

History
61 lines (40 loc) · 1.32 KB

README.md

File metadata and controls

61 lines (40 loc) · 1.32 KB

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:

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