webcomponent-qr-code

<qr-code>

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

Demo

Check it live.

Install

npm install webcomponent-qr-code

Usage

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) {}

Options

Attribute	Type	Default	Description
data	string	null	The information encoded by the QR code.
format	string: 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)
ecclevel	string: L, M, Q, H,	L	Error correction level

Contributing

• Fork it!
• Create your feature branch: git checkout -b my-new-feature
• Commit your changes: git commit -m 'Add some feature'
• Push to the branch: git push origin my-new-feature
• Submit a pull request :D

Changelog

• v1.3.0 January 9, 2025
  • Support to configure error correction level (ECC).
• 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

License

MIT License