Skip to content
Web Component for generating QR codes
JavaScript HTML
Branch: gh-pages
Clone or download

Latest commit

Latest commit d5d99d2 Mar 11, 2019

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
.gitignore
LICENSE
README.md
index.html
index.js
package-lock.json
package.json
qr-code.es5.js
qr-code.html
qr-code.js
webpack.config.js

README.md

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>

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.

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

You can’t perform that action at this time.