Merge PR mebjas#978 from upstream

Author: mokalovesoulmate

README.md

@@ -93,9 +93,9 @@ We are working continuously on adding support for more and more platforms. If yo
 ### Framework support
 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.
 
-|<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" width="30px" />
-| -------- | -------- | -------- | -------- | -------- |
-| [Html5](./examples/html5) | [VueJs](./examples/vuejs) | [ElectronJs](./examples/electron) | [React](https://github.com/scanapp-org/html5-qrcode-react) | [Lit](./examples/lit)
+|<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" width="30px" /> | <img src="./examples/svelte/svelte.png" width="30px" />
+| -------- | -------- | -------- | -------- | -------- | -------- | 
+| [Html5](./examples/html5) | [VueJs](./examples/vuejs) | [ElectronJs](./examples/electron) | [React](https://github.com/scanapp-org/html5-qrcode-react) | [Lit](./examples/lit) | [Svelte](./examples/svelte)
 
 ### Supported Code formats
 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/svelte/README.md

@@ -0,0 +1,54 @@
+# html5-qrcode with Svelte/SvelteKit
+
+## Creating a `svelte` component for `html5-qrcode`
+
+### Install the library in your project
+
+```bash
+npm i html5-qrcode
+```
+
+### Create a `Scanner.svelte` component
+
+```svelte
+// Scanner.svelte
+<script lang="ts">
+	import { Html5QrcodeScanner } from 'html5-qrcode';
+	import { onMount } from 'svelte';
+
+    const { onScanSuccess, onScanFail } = $props();
+
+    // `onMount` indicates to the framework to render this component on the client-side.
+    onMount(async () => {
+        const scanner = new Html5QrcodeScanner('reader', { fps: 10, qrbox: 350 }, false);
+        scanner.render(onScanSuccess, onScanFail);
+    })
+</script>
+
+<div id="reader"></div>
+```
+
+### Use the component
+
+```svelte
+<script lang="ts">
+    // Import the Scanner component
+	import Scanner from './Scanner.svelte';
+
+    // Declare some local state
+    const data = $state(undefined);
+
+    // Define the callbacks
+	const onScanSuccess = (decodedText, decodedResult) => {
+		console.log(`Scan result: ${decodedText}`, decodedResult);
+        data = decodedText;
+	}
+	const onScanFail = (error) => {
+        console.warn(`Code scan error = ${error}`);
+    }
+</script>
+
+<section>
+    <Scanner {onScanSuccess} {onScanFail} />
+</section>
+```