Svelte-QRCode-Image

Under development, breaking change could occur before 1.0.0

QR-Code generated using qrcode (node-qrcode) and display via <img> element, with TypeScript support, works on SvelteKit.
Visit this page for live demo.

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";

for 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"
displayWidth	number	pass to the `width` property of `<img>` tag	null - the final `<img>` element will not have this property
displayHeight	number	pass to the `height` property of `<img>` tag	null - the final `<img>` element will not have this property
displayStyle	string	pass to the `style` property of `<img>` tag	"" - the final `<img>` element will not have this property
displayStyle	string	pass to the `style` property of `<img>` tag	"" - the final `<img>` element will not have this property
altText	string	pass to the `alt` property of `<img>` tag	"QR Code"
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

Plans

TODO

Documentation
Expose options to control the <img> tag
Reactivity on text change
Website for demo
Display the QR-Code as background image or canvas
Option to use different "backend" to generate the image

Not Planned

Complex/Fancy QR-Code styling to the image: I created this package for simplicity; in that case it will need different "backend" to generate the image and the size will be larger

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

You can change the port in vite.config.ts.

Since this being setup as SvelteKit project, so you should create your component in src/lib directory. And re-export it in src/lib/index.js file.

export { default as MyComponent } from './MyComponent.svelte';

Publish Package

Simply run this

svelte-package

will create a new directory called package with the TypeScript definition

Then you can publish it to npm (remember to login first)

cd package
npm publish

npm publish ./package

Publish Website

Due to recent change in SvelteKit, you need to run this command to build the website

vite build

Instead of 'npm run build` Since it's calling in the background

svelte-kit sync && svelte-package

Which will npt create the public directory, which is needed for the website to work.

Change Log

I decided not to write the change log until 1.0.0, but the commit history should be enough to track the changes.