{"id":18451445,"url":"https://github.com/trasherdk/svelte-qrcode","last_synced_at":"2025-04-08T02:32:23.911Z","repository":{"id":256693334,"uuid":"856136485","full_name":"trasherdk/svelte-qrcode","owner":"trasherdk","description":"A Svelte component for making QR Codes","archived":false,"fork":false,"pushed_at":"2024-09-13T06:25:11.000Z","size":50,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-12T17:27:46.775Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trasherdk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-12T03:51:03.000Z","updated_at":"2024-09-13T06:25:15.000Z","dependencies_parsed_at":"2024-09-12T14:00:36.771Z","dependency_job_id":"15349dce-55c2-4967-a402-65216ddaff6a","html_url":"https://github.com/trasherdk/svelte-qrcode","commit_stats":null,"previous_names":["trasherdk/svelte-qrcode"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trasherdk%2Fsvelte-qrcode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trasherdk%2Fsvelte-qrcode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trasherdk%2Fsvelte-qrcode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trasherdk%2Fsvelte-qrcode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trasherdk","download_url":"https://codeload.github.com/trasherdk/svelte-qrcode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223299979,"owners_count":17122506,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T07:28:41.016Z","updated_at":"2024-11-06T07:28:41.591Z","avatar_url":"https://github.com/trasherdk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# QR Code generator for Svelte\n\n## Note\n\nThis is a fork of https://github.com/bonosoft/sveltekit-qrcode\n\nThe original package is not maintained and does not support Svelte 5.\n\n## Install\nUse your package manager to install the module directly from GitHub:\n\n```shell\nnpm install @trasherdk/svelte-qrcode\n```\n\n## Adding QR Codes to a svelte file in SvelteKit\nNow you can start adding QR Codes to your pages.\n```ts\n\u003cscript lang=\"ts\"\u003e\n\timport QRCode from \"@trasherdk/svelte-qrcode\"\n\u003c/script\u003e\n\n\u003cQRCode content=\"Test\"\u003e\u003c/QRCode\u003e\n```\n\n![Alt text](https://github.com/trasherdk/svelte-qrcode/raw/main/readme/sample1.svg)\n\n# Quick Response Codes\nWhile 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.\n\nQR 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.\n\n# Content\nContent 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.\n\n```ts\n\u003cQRCode content=\"https://trasher.dk/\"/\u003e\n```\n\n# Size, padding and responsive\nYou 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.\n\nWith 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.\n\n```ts\n\u003cQRCode size=\"50\" content=\"https://trasher.dk/\"/\u003e\n\n\u003cQRCode padding=\"10\" content=\"https://trasher.dk/\"/\u003e\n\n\u003cQRCode responsive='true' content=\"https://trasher.dk/\"/\u003e\n```\n\n# Colours\nWith the colour settings, you can control both the front and background colour.\n\n```ts\n\u003cQRCode color=\"#009900\" content=\"https://trasher.dk/\"/\u003e\n\n\u003cQRCode color=\"#ffffff\" bgcolor=\"#009900\" content=\"https://trasher.dk/\"/\u003e\n```\n\n![QR Code Color Examples](https://github.com/trasherdk/svelte-qrcode/raw/main/readme/sample2.svg)\n\n## QR Code error correction\nQR 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.\nTo 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.\n\n* Level L  Approx 7%\n* Level M  Approx 15%\n* Level Q  Approx 25%\n* Level H  Approx 30%\n\n```ts\n\u003cQRCode errorCorrection='L' content=\"https://trasher.dk/\"/\u003e\n\n\u003cQRCode errorCorrection='M' content=\"https://trasher.dk/\"/\u003e\n\n\u003cQRCode errorCorrection='Q' content=\"https://trasher.dk/\"/\u003e\n\n\u003cQRCode errorCorrection='H' content=\"https://trasher.dk/\"/\u003e\n```\n\n# For use with Time based one time passwords (TOTP)\nSample URL for a John Doe user on the Acme app:\n```ts\n\u003cQRCode content=\"otpauth://totp/ACME%20Co:john.doe@email.com?secret=HXDMVJECJJWSRB3HWIZR4IFUGFTMXBOZ\u0026issuer=ACME%20Co\u0026algorithm=SHA1\u0026digits=6\u0026period=30\"/\u003e\n```\n\n![QR Code TOTP Example](https://github.com/trasherdk/svelte-qrcode/raw/main/readme/sample3.svg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrasherdk%2Fsvelte-qrcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrasherdk%2Fsvelte-qrcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrasherdk%2Fsvelte-qrcode/lists"}