QR Code
<pc-qr-code> Generate a QR code and render it using the Canvas API.
QR codes are useful for providing small pieces of information to users who can quickly scan them with a smartphone. Most smartphones have built‐in QR code scanners, so simply pointing the camera at a QR code will decode it and allow the user to visit a website, dial a phone number, log into a Wi-Fi network and so on.
<div class="qr-code-overview">
<pc-qr-code
value="https://example.com"
label="Scan this QR code to visit example.com."
></pc-qr-code>
<br />
<pc-input label="Value" maxlength="255" clearable></pc-input>
</div>
<script>
const container = document.querySelector(".qr-code-overview");
const qrCode = container.querySelector("pc-qr-code");
const input = container.querySelector("pc-input");
customElements.whenDefined("pc-qr-code").then(() => {
input.value = qrCode.value;
input.addEventListener("pc-input", () => {
qrCode.value = input.value;
});
});
</script>
<style>
.qr-code-overview {
max-inline-size: 16rem;
}
.qr-code-overview pc-input {
margin-block-start: var(--pc-spacing-l);
}
</style>Demos#
Colours#
Use the fill and background attributes to modify the QR code’s colours. You should always ensure at least a contrast ratio of 4,5∶1 to ensure that QR code scanners read the QR code properly.
Size#
Use the size attribute to change the size of the QR code.
Radius#
Use the radius attribute to round the corners of the QR code data.
Error correction#
QR codes can be rendered with various levels of error correction that can be set using the error-correction attribute. This example generates four codes with the same value using different error correction levels.
Properties#
| Name | Description | Reflects | Default |
|---|---|---|---|
value | The QR code’s value. Type: string |
| "" |
label | A label to use to describe the QR code to assistive devices. If unspecified, the value will be used instead. Type: string |
| "" |
size | The size of the QR code in pixels. Type: number |
| 128 |
fill | The QR code’s fill colour. This can be any valid CSS colour value, but not a custom property. Type: string |
| "black" |
background | The QR code’s background colour. This can be any valid CSS colour value or transparent, but not a custom property.Type: string |
| "white" |
radius | The corner radius of each QR code module. Must be a value between 0 and 0,5. Type: number |
| 0 |
errorCorrectionerror-correction | The level of error correction to use. Type: "L"
| "M"
| "Q"
| "H" |
| "M" |
updateComplete | A read‐only promise that resolves when the component has finished updating. | ‐ |
Learn more about attributes and properties.
Parts#
| Name | Description |
|---|---|
base | The component’s base wrapper. |
Learn more about customising CSS parts.
Importing#
If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.
To manually import this component from the CDN, copy this code snippet and paste it in your HTML.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/qr-code/qr-code.js"></script>To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/qr-code/qr-code.js";To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.
import "placer-toolkit/dist/components/qr-code/qr-code.js";