QR Code

Generates a QR code and renders it using the Canvas API.

Examples

Basic QR Code

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, read a message, etc.

<div class="qr-overview">
  <sl-qr-code value="https://shoelace.style/" label="Scan this code to visit Shoelace on the web!"></sl-qr-code>
  <br />

  <sl-input maxlength="255" clearable label="Value"></sl-input>
</div>

<script>
  const container = document.querySelector('.qr-overview');
  const qrCode = container.querySelector('sl-qr-code');
  const input = container.querySelector('sl-input');

  customElements.whenDefined('sl-qr-code').then(() => {
    input.value = qrCode.value;
    input.addEventListener('sl-input', () => (qrCode.value = input.value));
  });
</script>

<style>
  .qr-overview {
    max-width: 256px;
  }

  .qr-overview sl-input {
    margin-top: 1rem;
  }
</style>

div.qr-overview
  sl-qr-code value="https://shoelace.style/" label="Scan this code to visit Shoelace on the web!"
  br
  sl-input maxlength="255" clearable="true" label="Value"

javascript:
  const container = document.querySelector(.qr-overview);
  const qrCode = container.querySelector(sl-qr-code);
  const input = container.querySelector(sl-input);

  input.value = qrCode.value;
  input.addEventListener(sl-input, () => (qrCode.value = input.value));

css:
  .qr-overview {
    max-width: 256px;
  }

  .qr-overview sl-input {
    margin-top: 1rem;
  }

import { useState } from 'react';
import SlQrCode from '@teamshares/shoelace/dist/react/qr-code';
import SlInput from '@teamshares/shoelace/dist/react/input';

const css = `
  .qr-overview {
    max-width: 256px;
  }

  .qr-overview sl-input {
    margin-top: 1rem;
  }
`;

const App = () => {
  const [value, setValue] = useState('https://shoelace.style/');

  return (
    <>
      <div className="qr-overview">
        <SlQrCode value={value} label="Scan this code to visit Shoelace on the web!" />
        <br />

        <SlInput maxlength="255" clearable onInput={event => setValue(event.target.value)} />
      </div>

      <style>{css}</style>
    </>
  );
};

Colors

Use the fill and background attributes to modify the QR code’s colors. You should always ensure good contrast for optimal compatibility with QR code scanners.

<sl-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></sl-qr-code>

sl-qr-code value="https://shoelace.style/" fill="deeppink" background="white"

import SlQrCode from '@teamshares/shoelace/dist/react/qr-code';

const App = () => <SlQrCode value="https://shoelace.style/" fill="deeppink" background="white" />;

Size

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

<sl-qr-code value="https://shoelace.style/" size="64"></sl-qr-code>

sl-qr-code value="https://shoelace.style/" size="64"

import SlQrCode from '@teamshares/shoelace/dist/react/qr-code';

const App = () => <SlQrCode value="https://shoelace.style/" size="64" />;

Radius

Create a rounded effect with the radius attribute.

<sl-qr-code value="https://shoelace.style/" radius="0.5"></sl-qr-code>

sl-qr-code value="https://shoelace.style/" radius="0.5"

import SlQrCode from '@teamshares/shoelace/dist/react/qr-code';

const App = () => <SlQrCode value="https://shoelace.style/" radius="0.5" />;

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">
  <sl-qr-code value="https://shoelace.style/" error-correction="L"></sl-qr-code>
  <sl-qr-code value="https://shoelace.style/" error-correction="M"></sl-qr-code>
  <sl-qr-code value="https://shoelace.style/" error-correction="Q"></sl-qr-code>
  <sl-qr-code value="https://shoelace.style/" error-correction="H"></sl-qr-code>
</div>

<style>
  .qr-error-correction {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
</style>

div.qr-error-correction
  sl-qr-code value="https://shoelace.style/" error-correction="L"
  sl-qr-code value="https://shoelace.style/" error-correction="M"
  sl-qr-code value="https://shoelace.style/" error-correction="Q"
  sl-qr-code value="https://shoelace.style/" error-correction="H"

css:
  .qr-error-correction {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

import SlQrCode from '@teamshares/shoelace/dist/react/qr-code';

const css = `
  .qr-error-correction {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
`;

const App = () => {
  return (
    <>
      <div className="qr-error-correction">
        <SlQrCode value="https://shoelace.style/" error-correction="L" />
        <SlQrCode value="https://shoelace.style/" error-correction="M" />
        <SlQrCode value="https://shoelace.style/" error-correction="Q" />
        <SlQrCode value="https://shoelace.style/" error-correction="H" />
      </div>

      <style>{css}</style>
    </>
  );
};

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/cdn/components/qr-code/qr-code.js"></script>

import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/cdn/components/qr-code/qr-code.js';

import '@shoelace-style/shoelace/dist/components/qr-code/qr-code.js';

import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';

Properties

Learn more about attributes and properties.

Parts

Learn more about customizing CSS parts.