Web Component for generating QR Codes, using (a fork of) qr.js lib.
npm install webcomponent-qr-code
import 'webcomponent-qr-code'
<qr-code data="hello world!"></qr-code>
Custom element name
import QRCode from 'webcomponent-qr-code/qr-code'
customElements.define('myapp-qrcode', QRCode)
<myapp-qrcode data="hello world!"></myapp-qrcode>
Custom styles
Use the part
pseudo-element to style shadow DOM elements:
/* format="png" */
qr-code::part(img) {}
/* format="html" */
qr-code::part(table) {}
/* format="svg" */
qr-code::part(svg) {}
Attribute | Options | Default | Description |
---|---|---|---|
data |
string | null |
The information encoded by the QR code. |
format |
png , html , svg
|
png |
Format of the QR code rendered inside the component. |
modulesize |
int | 5 |
Size of the modules in pixels. |
margin |
int | 4 |
Margin of the QR code in modules. |
unit |
string | px |
CSS units of the modulesize (Supported for HTML generation only) |
ratio |
int | 1 |
Multiplier for the modulesize . Example: if units is rem and the ratio is 0.0625 , a modulesize of 5px will be translated to 0.3125rem . (Supported for HTML generation only) |
git checkout -b my-new-feature
git commit -m 'Add some feature'
git push origin my-new-feature
::part
CSS pseudo-element