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-width: 256px;
  }

  .qr-code-overview pc-input {
      margin-top: var(--pc-spacing-l);
  }
</style>

Code

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.

<pc-qr-code
  value="https://example.com"
  background="white"
  fill="indigo"
></pc-qr-code>

Code

Size

Use the size attribute to change the size of the QR code.

<pc-qr-code value="https://example.com" size="64"></pc-qr-code>

Code

Radius

Use the radius attribute to round the corners of the QR code data.

<pc-qr-code value="https://example.com" radius="0.5"></pc-qr-code>

Code

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.

<div class="qr-error-correction">
  <pc-qr-code value="https://example.com" error-correction="L"></pc-qr-code>
  <pc-qr-code value="https://example.com" error-correction="M"></pc-qr-code>
  <pc-qr-code value="https://example.com" error-correction="Q"></pc-qr-code>
  <pc-qr-code value="https://example.com" error-correction="H"></pc-qr-code>
</div>

<style>
  .qr-error-correction {
      display: flex;
      gap: var(--pc-spacing-l);
      flex-wrap: wrap;
  }
</style>

Code

Properties

Name	Description	Default
`canvas`	`HTMLElement`	-
`background`	`string`	`"white"`
`errorCorrection` `error-correction`	`"L" \| "M" \| "Q" \| "H"`	`"M"`
`fill`	`string`	`"black"`
`label`	`string`	`""`
`radius`	`number`	`0`
`size`	`number`	`128`
`value`	`string`	`""`
`updateComplete`	A read‐only promise that resolves when the component has finished updating.	-

Learn more about attributes and properties.

Methods

Name	Description	Arguments
`generate()`		-

Learn more about methods.

Importing

If you’re using the autoloader or the standard loader, you can ignore this section. If you’re cherry picking, you can use any of the following snippets to import this component.

Script

Import

Bundler

To import this component from the CDN with a script tag, copy this snippet and paste it in your HTML.

<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/qr-code/qr-code.js"></script>

To import this component from the CDN using a JavaScript import, copy this snippet and paste it in your JavaScript:

import "https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/qr-code/qr-code.js";

To import this component with a bundler using a JavaScript import, copy this snippet and paste it in your JavaScript:

import "placer-toolkit/dist/components/qr-code/qr-code.js";