Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trasherdk/svelte-qrcode
A Svelte component for making QR Codes
https://github.com/trasherdk/svelte-qrcode
Last synced: 9 days ago
JSON representation
A Svelte component for making QR Codes
- Host: GitHub
- URL: https://github.com/trasherdk/svelte-qrcode
- Owner: trasherdk
- License: mit
- Created: 2024-09-12T03:51:03.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-09-13T06:25:11.000Z (2 months ago)
- Last Synced: 2024-10-12T17:27:46.775Z (about 1 month ago)
- Language: TypeScript
- Size: 48.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# QR Code generator for Svelte
## Note
This is a fork of https://github.com/bonosoft/sveltekit-qrcode
The original package is not maintained and does not support Svelte 5.
## Install
Use your package manager to install the module directly from GitHub:
```shell
npm install @trasherdk/svelte-qrcode
```
## Adding QR Codes to a svelte file in SvelteKit
Now you can start adding QR Codes to your pages.
```ts
import QRCode from "@trasherdk/svelte-qrcode"
```
# Quick Response Codes
While conventional bar codes are capable of storing a maximum of approximately 20 digits, QR Code is capable of handling several dozen to several hundred times more information.
QR Code is capable of handling all types of data, such as numeric and alphabetic characters, Kanji, Kana, Hiragana, symbols, binary, and control codes. Up to 7,089 characters can be encoded in one symbol.
# Content
Content is the text that needs to be send to the code reader. The text is normally an URL to a web site, or a code that is used by an application, for example in handling secrets in time based one time password applications.
```ts
```
# Size, padding and responsive
You can set the size used for generation, the larger the size, the more information you are able to store in the QR code. The size is also used for the container in pixels. You can also specify the padding in module units, and recommended minimum is 4.
With the repsponsive settings enabled, the size settings will only be used in the code calculation, and the container will addapt and use all available space in it's parent element.
```ts
```
# Colours
With the colour settings, you can control both the front and background colour.
```ts
```
## QR Code error correction
QR Code has error correction capability to restore data if the code is dirty or damaged. Four error correction levels are available for users to choose according to the operating environment. Raising this level improves error correction capability but also increases the amount of data QR Code size.
To select error correction level, various factors such as the operating environment and QR Code size need to be considered. Level Q or H may be selected for factory environment where QR Code get dirty, whereas Level L may be selected for clean environment with the large amount of data. Typically, Level M (15%) is most frequently selected.
* Level L Approx 7%
* Level M Approx 15%
* Level Q Approx 25%
* Level H Approx 30%
```ts
```
# For use with Time based one time passwords (TOTP)
Sample URL for a John Doe user on the Acme app:
```ts
```
