deckdeckgo-qrcode
A Web Component to generate QR code
DeckDeckGo - QR Code
Create a lightweight presentation using Web Components.
DeckDeckGo let you create without effort your slides and allows you to add some extra interactive features with the help of the Ionic components.
For the editing, DeckDeckGo supports both HTML or Markdown.
Moreover, DeckDeckGo bundles your presentation with services workers letting you publish it online as a Progressive Web App.
Cherry on the cake �� DeckDeckGo comes with its Progressive Web App that allows you to remote control your presentation �
Table of contents
QR Code
This project has for goal to let you easily generate a QR code in your DeckDeckGo presentation.
However, this Web Component could be use with or without DeckDeckGo respectively could be use in any web projects.
To generate the QR code, the project qrcode-generator from Kazuhiko Arase is used.
Examples
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:
Getting Started
The DeckDeckGo - QR Code Web Component could be use directly in your project from a CDN, using a simple script include, or could be installed from npm.
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 src="https://unpkg.com/deckdeckgo-qrcode@latest/dist/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.
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:
| Property | Attribute | Description | Type | Default | Only applies for type <img/> |
|---|---|---|---|---|---|
content |
content |
The content, a text or an url, of the QR code to generate | string |
||
type |
type |
The type of QR code to generate, <svg/> or <img/> |
string |
svg |
|
qrCellSize |
qr-cell-size |
The 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 |
||
qrMargin |
qr-margin |
The size of the code margin, in case you would like more spacing | number |
||
qrAlt |
qr-img-alt |
An alternate text for the image of the QR code | string |
X | |
qrBackgroundColor |
qr-img-background-color |
The background color of the QR code. The value should be provided in a RGB-hex format. For example: FF0000. |
string |
X | |
qrFillColor |
qr-img-fill-color |
The color use to fill the QR code. The value should be provided in a RGB-hex format. For example: FF0000. |
string |
X |
Styling
The <deckgo-qrcode/> could be styled using the following CSS4 variables which would only applies on the type <svg/>:
| CSS4 variable | Default | Note | Only applies for type <svg/> |
|---|---|---|---|
| --deckgo-qrcode-container-display | inline-block | The display property of the shadow host and the code container | |
| --deckgo-qrcode-size | The size, width and height, of the QR code | X | |
| --deckgo-qrcode-logo-ratio-size | 3 | If 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 value |
X |
| --deckgo-qrcode-border-stroke | The border color of the QR code | X | |
| --deckgo-qrcode-background-fill | transparent | The QR code's background | X |
| --deckgo-qrcode-color-fill | The 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>
QR Code with logo
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.
License
MIT © David Dal Busco
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- Released
- 2019-02-07
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Browser
- Browser Independent