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
Directly from npm:
npm install svelte-qrcode-image
From GitHub:
npm install git+https://github.com/1toldyou/svelte-qrcode-image.git
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.
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 ` |
null - the final <img> element will not have this property |
displayHeight | number | pass to the height attribute of <img> or ` |
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 ` |
null - the final element will not have this property |
displayClass | string | pass to the class attribute of <img> or ` |
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 |
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.
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.
<img>
tagsize
)See CHANGELOG.md
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
,
the default port is 3001
and can be opened in localhost:3001
or 127.0.0.1:3001
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';
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
or
npm publish ./package
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 being internally linked to
svelte-kit sync && svelte-package
Which will npt create the public
directory, which is needed for the website to work.