Svelte-QRCode-Image

QR-Code generated using node-qrcode and display via <img> or <canvas> element, with TypeScript support and exported as ESM, works on SvelteKit.
Visit this page for live demo.
1.0.0 coming very soon

Installation

Directly from npm:

npm install svelte-qrcode-image

From GitHub:

npm install git+https://github.com/1toldyou/svelte-qrcode-image.git

Usage

Under the <script> tag:

import { QRCodeImage } from "svelte-qrcode-image";

And that's all you need to put inside the <script> tag.

<QRCodeImage text="hi" />
<QRCodeImage text="hi" width=233 />
<QRCodeImage text="hi" width=233 height=233 />
<QRCodeImage text="hi" scale=10 displayType="canvas" />
<QRCodeImage displayType="canvas" displayStyle="border-style: dotted;" width=500 displayWidth=400 />

You can also bind the text props to a variable, and will automatically refresh when the variable changes (reactivity)

<QRCodeImage text={eee} />

for more real example you can reference the source code of the demo page.

Parameters

These parameters can be pass in to the <QRCodeImage /> Although none of them are required, but please fill in the text

prop	type	description	default value
text	string	what you want the QR Code to show; the QR Code will changed automatically if any changes in the variable binding to it	"Hello World"
displayType	"img" \| "canvas"	display the image in `<canvas>` or `<img>`	"img"
displayWidth	number	pass to the `width` attribute of `<img>` or ` tag	null - the final `<img>` element will not have this property
displayHeight	number	pass to the `height` attribute of `<img>` or ` tag	null - the final `<img>` element will not have this property
displayStyle	string	pass to the `style` attribute of `<img>` or `<canvas>` tag	null - the final `<img>` element will not have this property
altText	string	pass to the `alt` attribute of `<img>` tag	"QR Code"
displayID	string	pass to the `id` attribute of `<img>` or ` tag	null - the final element will not have this property
displayClass	string	pass to the `class` attribute of `<img>` or ` tag	null - the final element will not have this property
margin	number	pass to `margin` to the options of qrcode: Define how much wide the quiet zone should be	4
scale	number	pass to `scale` to the options of qrcode: A value of `1` means 1px per modules (black dots)	4
width	number	pass to `width` to the options of qrcode: Forces a specific width for the output image and takes precedence over `scale`.	undefined - will be calculated
errorCorrectionLevel	"L" \| "M" \| "Q" \| "H"	pass to `errorCorrectionLevel` to the options of qrcode: Error correction level.	"M"
version	number	pass to `version` to the options of qrcode: QR Code version.	undefined - will be calculated

Troubleshooting

If you encounter any problem, please open an issue on our GitHub Issue

Nevertheless, we recommend you to this with the latest version of Svelte or SvelteKit and unable to guarantee that it will work with older versions. The minimum version required of SvelteKit is 1.0.0-next.373 which use Vite 3. And not works with ancient browsers by default.

Limitation

The QR Code is being generated (A.K.A. the actual work) when onMount being called to prevent the undefined behavior of bind:this. Might only have the <img> or <canvas> tag created during SSR.

Plans

TODO

[x] Documentation
[x] Expose options to control the <img> tag
[x] Reactivity on text change
[x] Website for demo
[x] Display the QR-Code as canvas
[ ] Display the QR-Code as background image
[ ] Option to use different "backend" to generate the image
[ ] Automatic Testing
[ ] Reactivity on other options change (especially the size)

Dependencies

qrcode

Change Log

See CHANGELOG.md

create-svelte

Everything you need to build a Svelte library, powered by create-svelte.

Read more about creating a library in the docs.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Everything inside src/lib is part of your library, everything inside src/routes can be used as a showcase or preview app.

Building

To build your library:

npm run package

To create a production version of your showcase app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Publishing

Go into the package.json and give your package the desired name through the "name" option. Also consider adding a "license" field and point it to a LICENSE file which you can create from a template (one popular option is the MIT license).

To publish your library to npm:

npm publish