<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:
qr-code::part(img) {}
qr-code::part(table) {}
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
- 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.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
- v0.1.7 April 11, 2015
- 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