Skip to content

Latest commit

 

History

History
111 lines (84 loc) · 3.23 KB

README.md

File metadata and controls

111 lines (84 loc) · 3.23 KB
Raw

Published on webcomponents.org

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

Contributing

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

Changelog

  • 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

License

MIT License