<qr-reader>

Web Component for reading QR Codes.

Demo

Check it live.

Install

npm install webcomponent-qr-reader

Usage

import 'webcomponent-qr-reader'

const reader = document.querySelector('qr-reader')
reader.addEventListener('read', event => {
  console.log(event.detail)
})

<qr-reader></qr-reader>

Custom element name

import QRReader from 'webcomponent-qr-reader/qr-reader'

customElements.define('myapp-reader', QRReader)

<myapp-reader></myapp-reader>

Custom styles

Use the part pseudo-element to style shadow DOM elements:

qr-reader::part(video) {}

Options

Attribute	Options	Default	Description
scanInterval	int.	100	Scan interval time in ms.
debounceTime	int	2000	Time to ignore subsequent reads in ms.

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 October 23, 2023
  • Complete re-write
• v0.0.3 September 18, 2013
  • jsqrcode it's not called from the component. It needs now to be added as a dependency.
• v0.0.2 September 18, 2013
  • First working version of the component.
• v0.0.1 September 16, 2013
  • Started project using boilerplate-element

License

MIT License