├── .changeset ├── README.md └── config.json ├── .github └── dependabot.yml ├── .gitignore ├── CHANGELOG.md ├── README.md ├── dev ├── .gitignore ├── README.md ├── app.config.ts ├── bun.lockb ├── package.json ├── public │ └── favicon.ico ├── src │ ├── app.tsx │ ├── entry-client.tsx │ ├── entry-server.tsx │ └── global.d.ts ├── tsconfig.json └── uno.config.ts ├── env.d.ts ├── package.json ├── pnpm-lock.yaml ├── src └── index.tsx ├── tsconfig.json └── tsup.config.ts /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "restricted", 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch", 10 | "ignore": [] 11 | } 12 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: "npm" # See documentation for possible values 9 | directory: "/" # Location of package manifests 10 | schedule: 11 | interval: "weekly" 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .vinxi 4 | .output 5 | .solid 6 | .vercel -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # solid-qr-code 2 | 3 | ## 0.1.11 4 | 5 | ### Patch Changes 6 | 7 | - feat: twotone, test 8 | 9 | ## 0.1.10 10 | 11 | ### Patch Changes 12 | 13 | - test: add br, nbsp 14 | 15 | ## 0.1.9 16 | 17 | ### Patch Changes 18 | 19 | - test: remove html replacements 20 | 21 | ## 0.1.8 22 | 23 | ### Patch Changes 24 | 25 | - feat: qr code text 26 | 27 | ## 0.1.7 28 | 29 | ### Patch Changes 30 | 31 | - clear canvas before fill 32 | 33 | ## 0.1.6 34 | 35 | ### Patch Changes 36 | 37 | - feat: canvas 38 | 39 | ## 0.1.5 40 | 41 | ### Patch Changes 42 | 43 | - feat: export type in index.tsx 44 | 45 | ## 0.1.4 46 | 47 | ### Patch Changes 48 | 49 | - move to scannable 50 | 51 | ## 0.1.3 52 | 53 | ### Patch Changes 54 | 55 | - fix rollup 3 56 | 57 | ## 0.1.2 58 | 59 | ### Patch Changes 60 | 61 | - fix rollup 2 62 | 63 | ## 0.1.1 64 | 65 | ### Patch Changes 66 | 67 | - fix rollup 68 | 69 | ## 0.1.0 70 | 71 | ### Minor Changes 72 | 73 | - migrate to tsup 74 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # solid-qr-code 2 | 3 | > 4 | 5 | [![size](https://img.shields.io/bundlephobia/minzip/solid-qr-code?style=for-the-badge)](https://bundlephobia.com/package/solid-qr-code) 6 | [![size](https://img.shields.io/npm/v/solid-qr-code?style=for-the-badge)](https://www.npmjs.com/package/solid-qr-code) 7 | ![npm](https://img.shields.io/npm/dw/solid-qr-code?style=for-the-badge) 8 | 9 | [download-image]: https://img.shields.io/npm/dm/solid-qr-code.svg 10 | [download-url]: https://npmjs.org/package/solid-qr-code 11 | 12 | [![solid-qr-code](https://nodei.co/npm/solid-qr-code.png)](https://npmjs.org/package/solid-qr-code) 13 | 14 | A Solid component to generate [QR codes](http://en.wikipedia.org/wiki/QR_code) for rendering to the DOM. This package was ported to Solid from the [qrcode.react](https://github.com/zpao/qrcode.react) package made by [zpao](https://github.com/zpao) 15 | 16 | ## Installation 17 | 18 | ```sh 19 | npm install solid-qr-code 20 | ``` 21 | 22 | ## Usage 23 | 24 | `solid-qr-code` exports three components, supporting rendering as SVG or Canvas. SVG is generally recommended as it is more flexible, but Canvas may be preferable. 25 | 26 | All examples are shown using modern JavaScript modules and syntax. 27 | 28 | ### `QRCodeSVG` 29 | 30 | ```js 31 | import { render } from 'solid-js/web'; 32 | import QRCodeSVG from "solid-qr-code"; 33 | 34 | import App from './App'; 35 | 36 | render(() => , document.getElementById('root') as HTMLElement); 37 | ``` 38 | 39 | ### `QRCodeCanvas` 40 | 41 | ```js 42 | import { render } from 'solid-js/web'; 43 | import QRCodeCanvas from "solid-qr-code"; 44 | 45 | import App from './App'; 46 | 47 | render(() => , document.getElementById('root') as HTMLElement); 48 | ``` 49 | 50 | ### `QRCode` - **DEPRECATED** 51 | 52 | **Note:** Usage of this is deprecated as of v3. It is available as the `default` export for compatiblity with previous versions. The `renderAs` prop is only supported with this component. 53 | 54 | ```js 55 | import { render } from 'solid-js/web'; 56 | import QRCode from "solid-qr-code"; 57 | 58 | import App from './App'; 59 | 60 | render(() => , document.getElementById('root') as HTMLElement); 61 | ``` 62 | 63 | ## Available Props 64 | 65 | | prop | type | default value | 66 | | --------------- | ---------------------------- | ------------- | 67 | | `value` | `string` | 68 | | `renderAs` | `string` (`'canvas' 'svg'`) | `'canvas'` | 69 | | `size` | `number` | `128` | 70 | | `bgColor` | `string` (CSS color) | `"#FFFFFF"` | 71 | | `fgColor` | `string` (CSS color) | `"#000000"` | 72 | | `level` | `string` (`'L' 'M' 'Q' 'H'`) | `'L'` | 73 | | `includeMargin` | `boolean` | `false` | 74 | | `imageSettings` | `object` (see below) | | 75 | 76 | ### `imageSettings` 77 | 78 | | field | type | default value | 79 | | -------- | -------- | ----------------- | 80 | | `src` | `string` | 81 | | `x` | `number` | none, will center | 82 | | `y` | `number` | none, will center | 83 | | `height` | `number` | 10% of `size` | 84 | | `width` | `number` | 10% of `size` | 85 | 86 | ## Custom Styles 87 | 88 | `solid-qr-code` will pass through any additional props to the underlying DOM node (`` or ``). This allows the use of inline `style` or custom `className` to customize the rendering. One common use would be to support a responsive layout. 89 | 90 | **Note:** In order to render QR Codes in `` on high density displays, we scale the canvas element to contain an appropriate number of pixels and then use inline styles to scale back down. We will merge any additional styles, with custom `height` and `width` overriding our own values. This allows scaling to percentages _but_ if scaling beyond the `size`, you will encounter blurry images. I recommend detecting resizes with something like a solid version of [react-measure](https://github.com/souporserious/react-measure) to detect and pass the appropriate size when rendering to ``. 91 | 92 | 93 | 94 | ## Encoding Mode 95 | 96 | `solid-qr-code` supports encoding text only, in a single segment. The encoding library being used does minimal detection to determine if the text being encoded can follow an optimized path for Numeric or Alphanumeric modes, allowing for more data to be encoded. Otherwise, it will encode following Byte mode. This mode includes supports multi-byte Unicode characters such as Kanji, however it does not support the optimized Kanji encoding mode. 97 | 98 | ## LICENSE 99 | 100 | `solid-qr-code` is licensed under the [MIT license](LICENSE). 101 | 102 | `solid-qr-code` bundles [QR Code Generator](https://www.nayuki.io/page/qr-code-generator-library), which is available under the [MIT license](src/third-party/qrcodegen/LICENSE). 103 | -------------------------------------------------------------------------------- /dev/.gitignore: -------------------------------------------------------------------------------- 1 | 2 | dist 3 | .solid 4 | .output 5 | .vercel 6 | .netlify 7 | netlify 8 | 9 | # Environment 10 | .env 11 | .env*.local 12 | 13 | # dependencies 14 | /node_modules 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | *.launch 21 | .settings/ 22 | 23 | # Temp 24 | gitignore 25 | 26 | # System Files 27 | .DS_Store 28 | Thumbs.db 29 | -------------------------------------------------------------------------------- /dev/README.md: -------------------------------------------------------------------------------- 1 | # SolidStart 2 | 3 | Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com); 4 | 5 | ## Creating a project 6 | 7 | ```bash 8 | # create a new project in the current directory 9 | npm init solid@latest 10 | 11 | # create a new project in my-app 12 | npm init solid@latest my-app 13 | ``` 14 | 15 | ## Developing 16 | 17 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: 18 | 19 | ```bash 20 | npm run dev 21 | 22 | # or start the server and open the app in a new browser tab 23 | npm run dev -- --open 24 | ``` 25 | 26 | ## Building 27 | 28 | Solid apps are built with _adapters_, which optimise your project for deployment to different environments. 29 | 30 | By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different adapter, add it to the `devDependencies` in `package.json` and specify in your `vite.config.js`. 31 | -------------------------------------------------------------------------------- /dev/app.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "@solidjs/start/config"; 2 | import uno from "unocss/vite"; 3 | 4 | export default defineConfig({ 5 | ssr: true, 6 | server: { 7 | preset: process.env.DEVELOPMENT ? "node-server" : "cloudflare-pages-static", 8 | }, 9 | vite: { 10 | ssr: { 11 | optimizeDeps: { 12 | include: ["prismjs"], 13 | }, 14 | noExternal: ["prismjs"], 15 | }, 16 | optimizeDeps: { 17 | include: ["prismjs"], 18 | }, 19 | plugins: [uno()], 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /dev/bun.lockb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aidanaden/solid-qr-code/6c3f34fea119d57951ef62ade5511c00fbd776ea/dev/bun.lockb -------------------------------------------------------------------------------- /dev/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "type": "module", 4 | "scripts": { 5 | "dev": "vinxi dev", 6 | "build": "vinxi build", 7 | "build:dev": "DEVELOPMENT=1 vinxi build", 8 | "start": "vinxi start" 9 | }, 10 | "dependencies": { 11 | "@solidjs/start": "^0.6.0", 12 | "@unocss/reset": "^0.58.5", 13 | "solid-highlight": "^0.1.26", 14 | "solid-js": "^1.8.15", 15 | "solid-qr-code": "^0.1.11", 16 | "vinxi": "^0.3.4" 17 | }, 18 | "engines": { 19 | "node": ">=18" 20 | }, 21 | "devDependencies": { 22 | "unocss": "^0.58.5" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /dev/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aidanaden/solid-qr-code/6c3f34fea119d57951ef62ade5511c00fbd776ea/dev/public/favicon.ico -------------------------------------------------------------------------------- /dev/src/app.tsx: -------------------------------------------------------------------------------- 1 | import { Highlight, Language } from "solid-highlight"; 2 | import { For, createMemo, createSignal } from "solid-js"; 3 | import { 4 | ErrorCorrectionLevel, 5 | QRCodeCanvas, 6 | QRCodeSVG, 7 | QRCodeText, 8 | QRCodeTwoTone, 9 | } from "solid-qr-code"; 10 | 11 | import "@unocss/reset/tailwind.css"; 12 | import "virtual:uno.css"; 13 | 14 | import "prismjs/components/prism-jsx"; 15 | import "prismjs/plugins/line-numbers/prism-line-numbers"; 16 | 17 | import "prismjs/plugins/line-numbers/prism-line-numbers.css"; 18 | import "prismjs/themes/prism-okaidia.min.css"; 19 | 20 | function makeExampleCode( 21 | componentName: string, 22 | src: string, 23 | x: string, 24 | y: string, 25 | height: number, 26 | width: number, 27 | opacity: number, 28 | excavate: boolean, 29 | minVersion: number, 30 | value: string, 31 | title: string, 32 | size: number, 33 | bgColor: string, 34 | fgColor: string, 35 | // level: ErrorLevel, 36 | marginSize: number, 37 | includeImage: boolean 38 | ) { 39 | const imageSettingsCode = includeImage 40 | ? ` 41 | imageSettings={{ 42 | src: "${src}", 43 | x: ${x}, 44 | y: ${y}, 45 | height: ${height}, 46 | width: ${width}, 47 | opacity: ${opacity}, 48 | excavate: ${excavate}, 49 | }}` 50 | : ""; 51 | const minVersionCode = 52 | minVersion > 1 53 | ? `minVersion={${minVersion}} 54 | ` 55 | : ""; 56 | return `import { ${componentName} } from 'solid-qr-code'; 57 | 58 | <${componentName} 59 | value={"${value}"} 60 | title={"${title}"} 61 | size={${size}} 62 | bgColor={"${bgColor}"} 63 | fgColor={"${fgColor}"} 64 | ${minVersionCode}marginSize={${marginSize}}${imageSettingsCode} 65 | />`; 66 | } 67 | 68 | function FullDemo() { 69 | const [language, setLanguage] = createSignal(Language.REACT_JSX); 70 | const [value, setValue] = createSignal( 71 | "https://picturesofpeoplescanningqrcodes.tumblr.com/" 72 | ); 73 | const [size, setSize] = createSignal(128); 74 | const [fgColor, setFgColor] = createSignal("#000000"); 75 | const [bgColor, setBgColor] = createSignal("#ffffff"); 76 | const [level, setLevel] = createSignal( 77 | ErrorCorrectionLevel.LOW 78 | ); 79 | const [minVersion, setMinVersion] = createSignal(1); 80 | const [marginSize, setMarginSize] = createSignal(0); 81 | const [title, setTitle] = createSignal("Title for my QR Code"); 82 | const [includeImage, setIncludeImage] = createSignal(true); 83 | const [imageH, setImageH] = createSignal(240); 84 | const [imageW, setImageW] = createSignal(240); 85 | const [imageX, setImageX] = createSignal(0); 86 | const [imageY, setImageY] = createSignal(0); 87 | const [imageOpacity, setImageOpacity] = createSignal(1); 88 | const [imageSrc, setImageSrc] = createSignal( 89 | "https://static.zpao.com/favicon.png" 90 | ); 91 | const [imageExcavate, setImageExcavate] = createSignal(true); 92 | const [centerImage, setCenterImage] = createSignal(true); 93 | 94 | const svgCode = createMemo(() => 95 | makeExampleCode( 96 | "QRCodeSVG", 97 | imageSrc(), 98 | centerImage() ? "undefined" : imageX().toString(), 99 | centerImage() ? "undefined" : imageY().toString(), 100 | imageH(), 101 | imageW(), 102 | imageOpacity(), 103 | imageExcavate(), 104 | minVersion(), 105 | value(), 106 | title(), 107 | size(), 108 | bgColor(), 109 | fgColor(), 110 | marginSize(), 111 | includeImage() 112 | ) 113 | ); 114 | const canvasCode = createMemo(() => 115 | makeExampleCode( 116 | "QRCodeCanvas", 117 | imageSrc(), 118 | centerImage() ? "undefined" : imageX().toString(), 119 | centerImage() ? "undefined" : imageY().toString(), 120 | imageH(), 121 | imageW(), 122 | imageOpacity(), 123 | imageExcavate(), 124 | minVersion(), 125 | value(), 126 | title(), 127 | size(), 128 | bgColor(), 129 | fgColor(), 130 | marginSize(), 131 | includeImage() 132 | ) 133 | ); 134 | 135 | return ( 136 |
137 |
138 |
139 | 149 |
150 |
151 | 161 |
162 |
163 | 173 |
174 |
175 | 191 |
192 |
193 | 205 |
206 |
207 | 220 |
221 |
222 |