Webcomponent-qr-code NPM

<qr-code>

Web Component for generating QR Codes, using (a fork of) qr.js lib.

Check it live.

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)

v1.2.0 July 12, 2023
- Support for any CSS unit in HTML generated codes.
v1.1.0 November 15, 2022
- Support for custom styles with the ::part CSS pseudo-element
v1.0.0 July 13, 2018
- Use new API customElements.define
- Support for a custom element name
- Keep support for document.register() in /qr-code.es5.js
v0.1.9 December 9, 2016
- Updated docs
v0.1.7 April 11, 2015
- Support for SVG
v0.1.6 April 10, 2015
- Default attributes
- qr.js removed and used as a dependency
- Available in NPM
v0.1.1 March 31, 2015
- Framework-agnostic webcomponent (no use of Polymer)
- Available in Bower
v0.0.1 September 18, 2013
- Started project using boilerplate-element