@david-koontz/qr-code v1.0.3
qr-code
Web component to display given content as a QR code, leveraging the qrcode package to render to an internal canvas element.
Examples
Demo site with a few examples.
The content attribute is the only required attribute in order to render the QR code:
<script type="module" src="qr-code.js"></script>
<qr-code content="https://developer.mozilla.org/docs/Web/API/Web_components"></qr-code>However there are many other supplemental options to customize the QR code:
<script type="module" src="qr-code.js"></script>
<qr-code
background-color="#ebeaea"
content="https://vite.dev/guide/"
logo="https://vite.dev/logo.svg"
pixel-color="#8400d9"
scale="8"
></qr-code>API
Many attributes are just exposing controls over the underlying options for qrcode to render the QR code.
| Attribute | Type | Default | Description |
|---|---|---|---|
content | String | Required. String (usually a URL) to render as a QR code. | |
logo | String | URL to an image to optionally display in the center of the QR code, for branding purposes or otherwise. | |
background-color | String | #ffffffff | Color for the background behind the pixel dots. Value must be a valid hex format. |
pixel-color | String | #000000ff | Color for the pixel dots. Value must be a valid hex format. |
error-correction-level | low, medium, quartile, high or L, M, Q, H | M | Higher levels offer a better error resistance but reduce the symbol's capacity. See qrcode's Error Correction Level for more. When a logo is provided, the default increases to Q for better accuracy. |
margin | Number | 4 | How much wide the "quiet zone" rendered around the QR code should be. |
scale | Number | 4 | Scale factor. A value of "1" means "1px per module". |
width | Number | Forces a specific width for the output image. If width is too small to contain the QR code, this option will be ignored. Takes precedence over scale. |
Usage
Option 1: Install from npm
npm install @david-koontz/qr-codeFrom there you can either move/automate the included dist/qr-code.js file to where you need and can access it, or import it into your application directly:
import('@david-koontz/qr-code');Option 2: The prebuilt qr-code.js file is included for ease of use as well.
Download from https://github.com/david-koontz/qr-code/tree/main/dist/qr-code.js and enjoy.