Skip to content

Latest commit

 

History

History
50 lines (34 loc) · 1.22 KB

README.md

File metadata and controls

50 lines (34 loc) · 1.22 KB

ZXinger

An ESM ready QR code scanner with a nice web component you can drop in anywhere. This is a fork and cleanup of the ZXing library to make it work as an ESM module.

We will keep trying to modernize this library to ESM standards and we do accept pull requests, so please contribute if you can.

Demo

View demo

Quickstart

Install with npm

npm install chainparency/zxinger

To use from CDN

Just add this inside your <head></head> tags then the rest is the same:

<script type="importmap">
  {
    "imports": {
      "zxinger": "https://cdn.jsdelivr.net/gh/chainparency/zxinger@0/"
    }
  }
</script>

Usage

The easiest way is to use the web component.

# TODO
<script type="module">
import 'zinger/components/zxinger-scanner.js'

document.querySelector("zxinger").addEventListener("change", (e) => console.log("result:", e.detail.value))
document.querySelector("#scanButton").addEventListener("click", () => document.querySelector("#zxinger").open())
</script>

<zxinger-scanner id="zxinger"></zxinger-scanner>
<button id="scanButton"></button>

View code for the demo here.