Socket
Socket
Sign inDemoInstall

webcomponent-qr-code

Package Overview
Dependencies
1
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

webcomponent-qr-code

Web Component for generating QR codes


Version published
Maintainers
1
Weekly downloads
2,585
decreased by-9.01%

Weekly downloads

Readme

Source

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

AttributeOptionsDefaultDescription
datastringnullThe information encoded by the QR code.
formatpng, html, svgpngFormat of the QR code rendered inside the component.
modulesizeint5Size of the modules in pixels.
marginint4Margin of the QR code in modules.
unitstringpxCSS units of the modulesize (Supported for HTML generation only)
ratioint1Multiplier 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

Keywords

FAQs

Last updated on 12 Jul 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc