🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
svelte-qrcode-image
Advanced tools
svelte-qrcode-image - npm Package Compare versions
Comparing version 0.3.3 to 0.3.5
| { | ||
| "name": "svelte-qrcode-image", | ||
| "version": "0.3.3", | ||
| "version": "0.3.5", | ||
| "devDependencies": { | ||
@@ -39,5 +39,6 @@ "@sveltejs/adapter-auto": "next", | ||
| ".": "./index.js", | ||
| "./QRCodeImage.svelte": "./QRCodeImage.svelte" | ||
| "./QRCodeImage.svelte": "./QRCodeImage.svelte", | ||
| "./util": "./util.js" | ||
| }, | ||
| "svelte": "./index.js" | ||
| } |
| import { SvelteComponentTyped } from "svelte"; | ||
| import QRCodeGenerator from 'qrcode'; | ||
| declare const __propDef: { | ||
| props: { | ||
| text?: string | undefined; | ||
| generator?: "node-qrcode" | undefined; | ||
| displayWidth?: number | undefined; | ||
@@ -11,3 +13,5 @@ displayHeight?: number | undefined; | ||
| scale?: number | undefined; | ||
| width: number | undefined; | ||
| width?: number | undefined; | ||
| errorCorrectionLevel?: QRCodeGenerator.QRCodeErrorCorrectionLevel | undefined; | ||
| version?: number | undefined; | ||
| getImageURL?: (() => string) | undefined; | ||
@@ -14,0 +18,0 @@ }; |
@@ -25,2 +25,3 @@ # Svelte-QRCode-Image | ||
| ``` | ||
| for real example you can reference the [source code](https://github.com/1toldyou/svelte-qrcode-image/blob/main/src/routes/%2Bpage.svelte) of the [demo page](https://svelte-qrcode-image.itoldyou.dev/). | ||
@@ -31,25 +32,31 @@ ## Parameters | ||
| | 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](https://www.npmjs.com/package/qrcode): Define how much wide the quiet zone should be | 4 | | ||
| | scale | number | pass to `scale` to the options of [qrcode](https://www.npmjs.com/package/qrcode): A value of `1` means 1px per modules (black dots) | 4 | | ||
| | width | number | pass to `width` to the options of [qrcode](https://www.npmjs.com/package/qrcode): Forces a specific width for the output image and takes precedence over `scale`. | undefined | | ||
| | 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](https://www.npmjs.com/package/qrcode): Define how much wide the quiet zone should be | 4 | | ||
| | scale | number | pass to `scale` to the options of [qrcode](https://www.npmjs.com/package/qrcode): A value of `1` means 1px per modules (black dots) | 4 | | ||
| | width | number | pass to `width` to the options of [qrcode](https://www.npmjs.com/package/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](https://www.npmjs.com/package/qrcode): Error correction level. | "M" | | ||
| | version | number | pass to `version` to the options of [qrcode](https://www.npmjs.com/package/qrcode): QR Code version. | undefined - will be calculated | | ||
| ## TODO | ||
| ## Plans | ||
| ### TODO | ||
| - [x] Documentation | ||
| - [ ] Expose more options | ||
| - [x] Expose options to control the `<img>` tag | ||
| - [x] Reactivity on text change | ||
| - [x] Website for demo | ||
| - [ ] Display the QR-Code as background image or canvas | ||
| - [x] Website for demo | ||
| - [ ] 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 | ||
@@ -98,1 +105,5 @@ | ||
| 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. |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
11473
25.01%- Number of package files
9
28.57%- Lines of code
34
21.43%- Number of lines in readme file
107
11.46%No dependency changes