Skip to content

Commit 5d10865

Browse files
kusigitkusigit
authored
Feature/59 LitElement example (#704)
* chore: 📝 add lit element example * style: 🎨 separate config constant * chore: 📝 complete example * fix: 🚨 fix codacy warnings * docs: 📝 add and update readme
1 parent ab1cd0a commit 5d10865

File tree

5 files changed

+240
-3
lines changed

5 files changed

+240
-3
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@ We are working continuously on adding support for more and more platforms. If yo
7070
### Framework support
7171
The library can be easily used with several other frameworks, I have been adding examples for a few of them and would continue to add more.
7272

73-
|<img src="https://scanapp.org/assets/github_assets/html5.png" width="30px">| <img src="https://scanapp.org/assets/github_assets/vuejs.png" width="30px">|<img src="https://scanapp.org/assets/github_assets/electron.png" width="30px"> | <img src="https://scanapp.org/assets/github_assets/react.svg" width="30px">
74-
| -------- | -------- | -------- | -------- |
75-
| [Html5](./examples/html5) | [VueJs](./examples/vuejs) | [ElectronJs](./examples/electron) | [React](https://github.com/scanapp-org/html5-qrcode-react)
73+
|<img src="https://scanapp.org/assets/github_assets/html5.png" width="30px">| <img src="https://scanapp.org/assets/github_assets/vuejs.png" width="30px">|<img src="https://scanapp.org/assets/github_assets/electron.png" width="30px"> | <img src="https://scanapp.org/assets/github_assets/react.svg" width="30px"> | <img src="https://seeklogo.com/images/L/lit-logo-6B43868CDC-seeklogo.com.png" height="30px">
74+
| -------- | -------- | -------- | -------- | -------- |
75+
| [Html5](./examples/html5) | [VueJs](./examples/vuejs) | [ElectronJs](./examples/electron) | [React](https://github.com/scanapp-org/html5-qrcode-react) | [Lit](./examples/lit)
7676

7777
### Supported Code formats
7878
Code scanning is dependent on [Zxing-js](https://github.com/zxing-js/library) library. We will be working on top of it to add support for more types of code scanning. If you feel a certain type of code would be helpful to have, please file a feature request.

‎examples/lit/README.md‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
# html5-qrcode with lit
2+
3+
<img src="https://lit.dev/images/logo.svg" height="80px"><br>
4+
[lit.dev](https://lit.dev/)
5+
6+
## How to create a `lit` component for `html5-qrcode`
7+
8+
### Create the component in JavaScript
9+
10+
```js
11+
import { html, css, LitElement } from "https://unpkg.com/lit?module";
12+
import { Html5QrcodeScanner } from "https://unpkg.com/html5-qrcode?module";
13+
14+
export class QRCodeScanner extends LitElement {
15+
render() {
16+
return html`
17+
<div id="reader"></div>
18+
<div>${this.decodedText}</div>
19+
<div>${this.errorMessage}</div>
20+
`;
21+
}
22+
23+
firstUpdated() {
24+
const onScanSuccess = (decodedText, decodedResult) => {
25+
// handle the scanned code as you like
26+
this.decodedText = decodedText;
27+
};
28+
29+
const onScanFailure = (errorMessage, error) => {
30+
// handle scan failure, usually better to ignore and keep scanning
31+
this.errorMessage = errorMessage;
32+
};
33+
34+
const config = {
35+
fps: 10,
36+
qrbox: {
37+
width: 350,
38+
height: 250,
39+
},
40+
};
41+
42+
const reader = this.shadowRoot.querySelector("#reader");
43+
const scanner = new Html5QrcodeScanner(reader, config);
44+
45+
scanner.render(onScanSuccess, onScanFailure);
46+
}
47+
}
48+
49+
customElements.define("qrcode-scanner", QRCodeScanner);
50+
```
51+
52+
### Create the component in TypeScript
53+
54+
```ts
55+
import { css, html, LitElement, TemplateResult } from 'lit';
56+
import { customElement } from 'lit/decorators/custom-element.js';
57+
import { query } from 'lit-element';
58+
import { Html5QrcodeError, Html5QrcodeResult } from 'html5-qrcode/esm/core';
59+
import { Html5QrcodeScanner } from 'html5-qrcode';
60+
61+
@customElement('qrcode-scanner')
62+
export class QRCodeScanner extends LitElement {
63+
@query('#reader')
64+
reader: HTMLElement;
65+
66+
protected render(): TemplateResult {
67+
return html` <div id="reader"></div> `;
68+
}
69+
70+
protected firstUpdated(): void {
71+
const onScanSuccess = (
72+
decodedText: string,
73+
decodedResult: Html5QrcodeResult
74+
) => {
75+
// handle the scanned code as you like
76+
console.log(`Code matched = ${decodedText}`, decodedResult);
77+
};
78+
79+
const onScanFailure = (errorMessage: string, error: Html5QrcodeError) => {
80+
// handle scan failure, usually better to ignore and keep scanning
81+
console.warn(`Code scan error = ${errorMessage}`, error);
82+
};
83+
84+
const config = {
85+
fps: 10,
86+
qrbox: {
87+
width: 350,
88+
height: 250,
89+
},
90+
};
91+
92+
const scanner = new Html5QrcodeScanner(
93+
this.reader,
94+
config,
95+
false
96+
);
97+
98+
scanner.render(onScanSuccess, onScanFailure);
99+
}
100+
}
101+
102+
declare global {
103+
interface HTMLElementTagNameMap {
104+
'qrcode-scanner': QRCodeScanner;
105+
}
106+
}
107+
108+
```
109+
110+
### Include the component in your HTML page
111+
112+
```html
113+
<!DOCTYPE html>
114+
<head>
115+
<script type="module" src="./qrcode-scanner.js"></script>
116+
</head>
117+
<body>
118+
<qrcode-scanner></qrcode-scanner>
119+
</body>
120+
```
121+
122+
### Contributors
123+
| Name | Profile|
124+
| ----- | ------ |
125+
| Markus Fürer | [@kusigit](https://github.com/kusigit) |

‎examples/lit/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<script type="module" src="./qrcode-scanner.js"></script>
4+
</head>
5+
<body>
6+
<qrcode-scanner></qrcode-scanner>
7+
</body>

‎examples/lit/qrcode-scanner.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { html, css, LitElement } from "https://unpkg.com/lit?module";
2+
import { Html5QrcodeScanner } from "https://unpkg.com/html5-qrcode?module";
3+
4+
export class QRCodeScanner extends LitElement {
5+
static styles = css`
6+
:host {
7+
display: block;
8+
}
9+
`;
10+
11+
render() {
12+
return html`
13+
<div id="reader"></div>
14+
<div>${this.decodedText}</div>
15+
<div>${this.errorMessage}</div>
16+
`;
17+
}
18+
19+
firstUpdated() {
20+
const onScanSuccess = (decodedText, decodedResult) => {
21+
// handle the scanned code as you like
22+
this.decodedText = decodedText;
23+
};
24+
25+
const onScanFailure = (errorMessage, error) => {
26+
// handle scan failure, usually better to ignore and keep scanning
27+
this.errorMessage = errorMessage;
28+
};
29+
30+
const config = {
31+
fps: 10,
32+
qrbox: {
33+
width: 350,
34+
height: 250,
35+
},
36+
};
37+
38+
const reader = this.shadowRoot.querySelector("#reader");
39+
const html5QrcodeScanner = new Html5QrcodeScanner(reader, config);
40+
41+
html5QrcodeScanner.render(onScanSuccess, onScanFailure);
42+
}
43+
}
44+
45+
customElements.define("qrcode-scanner", QRCodeScanner);

‎examples/lit/qrcode-scanner.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { css, html, LitElement, TemplateResult } from 'lit';
2+
import { customElement } from 'lit/decorators/custom-element.js';
3+
import { query } from 'lit-element';
4+
import { Html5QrcodeError, Html5QrcodeResult } from 'html5-qrcode/esm/core';
5+
import { Html5QrcodeScanner } from 'html5-qrcode';
6+
7+
@customElement('qrcode-scanner')
8+
export class QRCodeScanner extends LitElement {
9+
static styles = [
10+
css`
11+
:host {
12+
display: block;
13+
}
14+
`,
15+
];
16+
17+
@query('#reader')
18+
reader: HTMLElement;
19+
20+
protected render(): TemplateResult {
21+
return html` <div id="reader"></div> `;
22+
}
23+
24+
protected firstUpdated(): void {
25+
const onScanSuccess = (
26+
decodedText: string,
27+
decodedResult: Html5QrcodeResult
28+
) => {
29+
// handle the scanned code as you like
30+
console.log(`Code matched = ${decodedText}`, decodedResult);
31+
};
32+
33+
const onScanFailure = (errorMessage: string, error: Html5QrcodeError) => {
34+
// handle scan failure, usually better to ignore and keep scanning
35+
console.warn(`Code scan error = ${errorMessage}`, error);
36+
};
37+
38+
const config = {
39+
fps: 10,
40+
qrbox: {
41+
width: 350,
42+
height: 250,
43+
},
44+
};
45+
46+
const html5QrcodeScanner = new Html5QrcodeScanner(
47+
this.reader,
48+
config,
49+
false
50+
);
51+
52+
html5QrcodeScanner.render(onScanSuccess, onScanFailure);
53+
}
54+
}
55+
56+
declare global {
57+
interface HTMLElementTagNameMap {
58+
'qrcode-scanner': QRCodeScanner;
59+
}
60+
}

0 commit comments

Comments
 (0)