/qr-code

Web Component for generating QR codes

Primary LanguageJavaScript

<qr-code>

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

Maintained by Eduard Castellano.

Demo

Check it live.

Usage

  • NPM and Browserify (polyfill and the component):

    Install:

     npm install webcomponents.js
 npm install webcomponent-qr-code

    Import:

     require('node_modules/webcomponents.js/webcomponents');
 require('node_modules/webcomponent-qr-code/src/qr-code');

  • Bower (polyfill, qr.js and the component):

    Install:

     bower install webcomponentsjs
 bower install webcomponent-qr-code

    Import:

     <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
 <script src="bower_components/qrjs/qr.js"></script>
 <script src="bower_components/webcomponent-qr-code/src/qr-code.js"></script>

    You can also import the component with HTML Imports, but you still need to import the polyfill and the qr.js lib separately:

    <link rel="import" href="bower_components/webcomponent-qr-code/src/qr-code.html">

  • Start using it!

     <qr-code data="hello world!"></qr-code>

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

History

  • 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