QR Code

The "QR Code" component is an extra component which let you add QR code in your slides, useful for example to display links and url and if you wish your audience to easily access them.

To generate the QR code, the project qrcode-generator from Kazuhiko Arase is used.

Table of contents

Showcase

This Web Component let you generate QR code like the following as svg (default) or img:

Optionally you could also display a logo over your QR code:

Installation

This component could be added to your web application using the following methods.

If you are using our Starter Kit this template is included. You don't need to install it so therefore you should skip the "Installation" chapter.

Using DeckDeckGo QR Code from a CDN

It's recommended to use unpkg to use the DeckDeckGo Code from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src="https://unpkg.com/@deckdeckgo/qrcode@latest/dist/deckdeckgo-qrcode/deckdeckgo-qrcode.esm.js"></script> <script nomodule="" src="https://unpkg.com/@deckdeckgo/qrcode@latest/dist/deckdeckgo-qrcode/deckdeckgo-qrcode.js"></script>

Install DeckDeckGo QR Code from NPM

Install DeckDeckGo - QR Code in your project from npm using the following command:

npm install @deckdeckgo/qrcode

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:

Import

import '@deckdeckgo/qrcode';

Loader

import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/qrcode/dist/loader'; deckDeckGoElement();

Usage

The <deckgo-qrcode/> Web Component will generate per default a <svg/> QR code with a correction level set to high.

Optionally, it's also possible to generate the QR code as an <img/> and/or to display a logo over it.

Slot

To display a logo over your QR code, this Web Component provide a slot called logo.

Properties

The <deckgo-qrcode/> expose the following properties:

PropertyAttributeDescriptionTypeDefaultOnly applies for type <img/>
contentcontentThe content, a text or an url, of the QR code to generatestring
typetypeThe type of QR code to generate, <svg/> or <img/>stringsvg
qrCellSizeqr-cell-sizeThe size of the cell, useful to generate a bigger QR code, specially in case of <img/>. Use it wisely, I suggest a value between 0 and 20 for example.number
qrMarginqr-marginThe size of the code margin, in case you would like more spacingnumber
qrAltqr-img-altAn alternate text for the image of the QR codestringX
qrBackgroundColorqr-img-background-colorThe background color of the QR code. The value should be provided in a RGB-hex format. For example: FF0000.stringX
qrFillColorqr-img-fill-colorThe color use to fill the QR code. The value should be provided in a RGB-hex format. For example: FF0000.stringX

Styling

The <deckgo-qrcode/> could be styled using the following CSS4 variables which would only applies on the type <svg/>:

CSS4 variableDefaultNoteOnly applies for type <svg/>
--deckgo-qrcode-container-displayinline-blockThe display property of the shadow host and the code container
--deckgo-qrcode-sizeThe size, width and height, of the QR codeX
--deckgo-qrcode-logo-ratio-size3If you are injecting a logo, its size, width and height, will be calculated with --deckgo-qrcode-size (or 100% if not provided) divided by this valueX
--deckgo-qrcode-border-strokeThe border color of the QR codeX
--deckgo-qrcode-background-filltransparentThe QR code's backgroundX
--deckgo-qrcode-color-fillThe QR code's color (the color of the QR code's squares it contains)X

Styling type img

In oder to style QR code if its type is set to <img/>, you will need to use properties instead of CSS4 variables.

Methods

The <deckgo-qrcode/> component exposes the following method in case you would like to refresh your QR code, for example on resize of the window on in case you would set its content asynchronously:

generate() => Promise<void>

Examples

You could find all the examples in the src/index.html of the project.

<deckgo-qrcode content="https://deckdeckgo.com" style="--deckgo-qrcode-size: 300px;"> </deckgo-qrcode>

Example with a logo:

<deckgo-qrcode content="https://myurl.com"> <img slot="logo" src="my-logo.svg"/> </deckgo-qrcode>

It's possible to display a logo over your QR Code as the code generated with this Web Component have a correction level set to high meaning, if I understand correctly, that your content is encoded and displayed multiple times inside the QR code. Therefore, even if the logo cover a part of it, it will be still possible for a reader to read the content from "somewhere else" in the code.

However, test it carefully and play with the colours, cell-size and size of your code to ensure its readability.