A Web Component to generate QR code
DeckDeckGo - QR Code
Create a lightweight presentation using Web 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.
Table of contents
- QR Code
- Getting Started
- QR Code with logo
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.
This Web Component let you generate QR code like the following as
svg (default) or
Optionally you could also display a logo over your QR code:
Using DeckDeckGo QR Code from a CDN
Install DeckDeckGo QR Code from NPM
npm install deckdeckgo-qrcode
<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.
To display a logo over your QR code, this Web Component provide a
<deckgo-qrcode/> expose the following properties:
|Property||Attribute||Description||Type||Default||Only applies for type
||The content, a text or an url, of the QR code to generate||
||The type of QR code to generate,
||The size of the cell, useful to generate a bigger QR code, specially in case of
||The size of the code margin, in case you would like more spacing||
||An alternate text for the image of the QR code||
||The background color of the QR code. The value should be provided in a RGB-hex format. For example:
||The color use to fill the QR code. The value should be provided in a RGB-hex format. For example:
<deckgo-qrcode/> could be styled using the following CSS4 variables which would only applies on the type
|CSS4 variable||Default||Note||Only applies for type
|--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-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.
<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>
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.
MIT © David Dal Busco