Need help with qr-code?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

educastellano
432 Stars 77 Forks MIT License 79 Commits 1 Opened issues

Description

Web Component for generating QR codes

Services available

!
?

Need anything else?

Contributors list

# 89,929
React
CSS
tableau
HTML
65 commits
# 382,390
Shell
C
lemonba...
dwm
2 commits
# 1,917
JavaScr...
notepad
notepad...
css-gri...
1 commit
# 239,094
repl
TypeScr...
digital...
qr
1 commit

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'

Custom element name:

import QRCode from 'webcomponent-qr-code/qr-code'

customElements.define('myapp-qrcode', 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.