{"id":20295861,"url":"https://github.com/andrejnemec/custom-qr-code","last_synced_at":"2025-03-04T05:41:08.959Z","repository":{"id":240096226,"uuid":"801640084","full_name":"AndrejNemec/custom-qr-code","owner":"AndrejNemec","description":"Updated version of qr-code-styling library","archived":false,"fork":false,"pushed_at":"2024-05-17T13:32:07.000Z","size":542,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-15T23:34:53.017Z","etag":null,"topics":["custom-qr-code","qr-code-generator","qrcode","qrcode-react","react","react-qr-code-generator"],"latest_commit_sha":null,"homepage":"","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/AndrejNemec.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-05-16T16:12:05.000Z","updated_at":"2024-11-17T00:27:38.000Z","dependencies_parsed_at":"2025-01-14T09:43:33.861Z","dependency_job_id":"106c0d51-5769-4892-beec-f04abbe857b5","html_url":"https://github.com/AndrejNemec/custom-qr-code","commit_stats":null,"previous_names":["andrejnemec/qr-code-styled"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrejNemec%2Fcustom-qr-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrejNemec%2Fcustom-qr-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrejNemec%2Fcustom-qr-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrejNemec%2Fcustom-qr-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrejNemec","download_url":"https://codeload.github.com/AndrejNemec/custom-qr-code/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241794114,"owners_count":20021189,"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":["custom-qr-code","qr-code-generator","qrcode","qrcode-react","react","react-qr-code-generator"],"created_at":"2024-11-14T15:36:29.828Z","updated_at":"2025-03-04T05:41:08.934Z","avatar_url":"https://github.com/AndrejNemec.png","language":"TypeScript","readme":"# Custom QR Code\n\n[![Version](https://img.shields.io/npm/v/custom-qr-code.svg)](https://www.npmjs.org/package/custom-qr-code)\n\nJavaScript library for generating QR codes with a logo and styling.\n\nThis is a fork of the currently unmaintained [repository by kozakdenys](https://github.com/kozakdenys/qr-code-styling) \u0026 [repository by KillianB](https://github.com/KilianB/styled-qr-code) fixing multiple issues:\n\n- [#49](https://github.com/kozakdenys/qr-code-styling/issues/105) [#105 QR code is not valid by some scanners](https://github.com/kozakdenys/qr-code-styling/issues/105)\n- outdated dependencies\n- release for es2017\n- migrated from webpack to vite\n- added support for react (`import { CustomQRCode } from 'custom-qr-code/react'`)\n\nTry the old version here https://qr-code-styling.com to get a feel\n\n### Examples\n\n\u003cp float=\"left\"\u003e\n\u003cimg style=\"display:inline-block\" src=\"https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/facebook_example_new.png\" width=\"240\" /\u003e\n\u003cimg style=\"display:inline-block\" src=\"https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/qr_code_example.png\" width=\"240\" /\u003e\n\u003cimg style=\"display:inline-block\" src=\"https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/telegram_example_new.png\" width=\"240\" /\u003e\n\u003c/p\u003e\n\n### Installation\n\n**NPM:**\n\n```\nnpm install custom-qr-code\n```\n\n**PNPM:**\n\n```\npnpm install custom-qr-code\n```\n\n**YARN:**\n\n```\nyarn add custom-qr-code\n```\n\n### Usage\n\n**React**\n\n```tsx\nimport { CustomQRCode } from \"custom-qr-code/react\";\n\nexport const App = () =\u003e {\n  return (\n    \u003cCustomQRCode\n      className=\"qr-container-class\"\n      style={{ margin: \"0 auto\" }}\n      containerProps={{ \"aria-label\": \"FB QR Code\" }}\n      width={300}\n      height={300}\n      type=\"svg\"\n      data=\"https://www.facebook.com/\"\n      image=\"https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg\"\n      dotsOptions={{\n        color: \"#4267b2\",\n        type: \"rounded\",\n      }}\n      backgroundOptions={{\n        color: \"#e9ebee\",\n      }}\n      imageOptions={{\n        crossOrigin: \"anonymous\",\n        margin: 20,\n      }}\n    /\u003e\n  );\n};\n```\n\n**Classic:**\n\n```HTML\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eQR Code Styling\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003cdiv id=\"canvas\"\u003e\u003c/div\u003e\n    \u003cscript type=\"module\"\u003e\n        import { CustomQRCode } from 'https://esm.sh/custom-qr-code'\n        const qrCode = new CustomQRCode({\n            width: 300,\n            height: 300,\n            type: \"svg\",\n            data: \"https://www.facebook.com/\",\n            image: \"https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg\",\n            dotsOptions: {\n                color: \"#4267b2\",\n                type: \"rounded\"\n            },\n            backgroundOptions: {\n                color: \"#e9ebee\",\n            },\n            imageOptions: {\n                crossOrigin: \"anonymous\",\n                margin: 20\n            }\n        });\n        qrCode.append(document.getElementById(\"canvas\"));\n        qrCode.download({ name: \"qr\", extension: \"svg\" });\n    \u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n### API Documentation\n\n#### CustomQRCode instance\n\n`new CustomQRCode(options) =\u003e CustomQRCode`\n\n| Param   | Type   | Description |\n| ------- | ------ | ----------- |\n| options | object | Init object |\n\n`options` structure\n\n| Property                | Type                      | Default Value | Description                                                                                   |\n| ----------------------- | ------------------------- | ------------- | --------------------------------------------------------------------------------------------- |\n| width                   | number                    | `300`         | Size of canvas                                                                                |\n| height                  | number                    | `300`         | Size of canvas                                                                                |\n| type                    | string (`'canvas' 'svg'`) | `canvas`      | The type of the element that will be rendered                                                 |\n| data                    | string                    |               | The date will be encoded to the QR code                                                       |\n| image                   | string                    |               | The image will be copied to the center of the QR code                                         |\n| margin                  | number                    | `0`           | Margin around canvas                                                                          |\n| qrOptions               | object                    |               | Options will be passed to `qrcode-generator` lib                                              |\n| imageOptions            | object                    |               | Specific image options, details see below                                                     |\n| dotsOptions             | object                    |               | Dots styling options                                                                          |\n| cornersSquareOptions    | object                    |               | Square in the corners styling options                                                         |\n| cornersDotOptionsHelper | object                    |               | Dots in the corners styling options                                                           |\n| backgroundOptions       | object                    |               | QR background styling options                                                                 |\n| useLegacyDotRotation    | boolean                   | false         | Use the mirrored qr creation strategy of the original library. (Some scanners might not work) |\n\n`options.qrOptions` structure\n\n| Property             | Type                                               | Default Value |\n| -------------------- | -------------------------------------------------- | ------------- |\n| typeNumber           | number (`0 - 40`)                                  | `0`           |\n| mode                 | string (`'Numeric' 'Alphanumeric' 'Byte' 'Kanji'`) |\n| errorCorrectionLevel | string (`'L' 'M' 'Q' 'H'`)                         | `'Q'`         |\n\n`options.imageOptions` structure\n\n| Property           | Type                                    | Default Value | Description                                                                    |\n| ------------------ | --------------------------------------- | ------------- | ------------------------------------------------------------------------------ |\n| hideBackgroundDots | boolean                                 | `true`        | Hide all dots covered by the image                                             |\n| imageSize          | number                                  | `0.4`         | Coefficient of the image size. Not recommended to use ove 0.5. Lower is better |\n| margin             | number                                  | `0`           | Margin of the image in px                                                      |\n| crossOrigin        | string(`'anonymous' 'use-credentials'`) | `anonymous`   |                                                                                |\n\n`options.dotsOptions` structure\n\n| Property | Type                                                                           | Default Value | Description         |\n| -------- | ------------------------------------------------------------------------------ | ------------- | ------------------- |\n| color    | string                                                                         | `'#000'`      | Color of QR dots    |\n| gradient | object                                                                         |               | Gradient of QR dots |\n| type     | string (`'rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded'`) | `'square'`    | Style of QR dots    |\n\n`options.backgroundOptions` structure\n\n| Property | Type   | Default Value |\n| -------- | ------ | ------------- |\n| color    | string | `'#fff'`      |\n| gradient | object |\n\n`options.cornersSquareOptions` structure\n\n| Property | Type                                      | Default Value | Description                |\n| -------- | ----------------------------------------- | ------------- | -------------------------- |\n| color    | string                                    |               | Color of Corners Square    |\n| gradient | object                                    |               | Gradient of Corners Square |\n| type     | string (`'dot' 'square' 'extra-rounded'`) |               | Style of Corners Square    |\n\n`options.cornersDotOptions` structure\n\n| Property | Type                      | Default Value | Description             |\n| -------- | ------------------------- | ------------- | ----------------------- |\n| color    | string                    |               | Color of Corners Dot    |\n| gradient | object                    |               | Gradient of Corners Dot |\n| type     | string (`'dot' 'square'`) |               | Style of Corners Dot    |\n\nGradient structure\n\n`options.dotsOptions.gradient`\n\n`options.backgroundOptions.gradient`\n\n`options.cornersSquareOptions.gradient`\n\n`options.cornersDotOptions.gradient`\n\n| Property   | Type                         | Default Value | Description                                                                            |\n| ---------- | ---------------------------- | ------------- | -------------------------------------------------------------------------------------- |\n| type       | string (`'linear' 'radial'`) | \"linear\"      | Type of gradient spread                                                                |\n| rotation   | number                       | 0             | Rotation of gradient in radians (Math.PI === 180 degrees)                              |\n| colorStops | array of objects             |               | Gradient colors. Example `[{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]` |\n\nGradient colorStops structure\n\n`options.dotsOptions.gradient.colorStops[]`\n\n`options.backgroundOptions.gradient.colorStops[]`\n\n`options.cornersSquareOptions.gradient.colorStops[]`\n\n`options.cornersDotOptions.gradient.colorStops[]`\n\n| Property | Type             | Default Value | Description                         |\n| -------- | ---------------- | ------------- | ----------------------------------- |\n| offset   | number (`0 - 1`) |               | Position of color in gradient range |\n| color    | string           |               | Color of stop in gradient range     |\n\n#### CustomQRCode methods\n\n`CustomQRCode.append(container) =\u003e void`\n\n| Param     | Type        | Description                                              |\n| --------- | ----------- | -------------------------------------------------------- |\n| container | DOM element | This container will be used for appending of the QR code |\n\n`CustomQRCode.getRawData(extension) =\u003e Promise\u003cBlob\u003e`\n\n| Param     | Type                                 | Default Value | Description |\n| --------- | ------------------------------------ | ------------- | ----------- |\n| extension | string (`'png' 'jpeg' 'webp' 'svg'`) | `'png'`       | Blob type   |\n\n`CustomQRCode.update(options) =\u003e void`\n\n| Param   | Type   | Description                            |\n| ------- | ------ | -------------------------------------- |\n| options | object | The same options as for initialization |\n\n`CustomQRCode.download(downloadOptions, quality) =\u003e Promise\u003cvoid\u003e`\n\n| Param           | Type   | Description                                                                                                                                                                                                                                                                                                 |\n| --------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| downloadOptions | object | Options with extension and name of file (not required)                                                                                                                                                                                                                                                      |\n| quality         | number | A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range. |\n\n`downloadOptions` structure\n\n| Property  | Type                                 | Default Value | Description                 |\n| --------- | ------------------------------------ | ------------- | --------------------------- |\n| name      | string                               | `'qr'`        | Name of the downloaded file |\n| extension | string (`'png' 'jpeg' 'webp' 'svg'`) | `'png'`       | File extension              |\n\n`CustomQRCode.toDataUrl(extension, quality) =\u003e Promise\u003cvoid\u003e`\n\n| Param     | Type                           | Default Value | Description                                                                                                                                                                                                                                                                                                  |\n| --------- | ------------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| extension | string (`'png' 'jpeg' 'webp')` | 'png'         | Blob type                                                                                                                                                                                                                                                                                                    |\n| quality   | number                         | undefined     | [A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range. |\n\n### License\n\n[MIT License](https://github.com/AndrejNemec/custom-qr-code/raw/main/LICENSE). Copyright (c) 2024 Andrej Nemec\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrejnemec%2Fcustom-qr-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrejnemec%2Fcustom-qr-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrejnemec%2Fcustom-qr-code/lists"}