# styled-qr-code > Add a style and an image to your QR code Latest version **1.0.0** (published 2022-08-28) · MIT license · 0 weekly downloads ## Install ```sh npm install styled-qr-code pnpm add styled-qr-code yarn add styled-qr-code bun add styled-qr-code ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2022-08-28 | | First published | 2022-08-28 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 324.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 37 | | Author | Kilian Brachtendorf | | Maintainers | kilian19 | | Keywords | qr, qrcode, qr-code, js, qrjs, qrstyling, styling, qrbranding, branding, qrimage, image, qrlogo, logo, design | ## Links - npm: https://www.npmjs.com/package/styled-qr-code - Repository: https://github.com/KilianB/styled-qr-code - Issues: https://github.com/KilianB/styled-qr-code/issues - npm.io page: https://npm.io/package/styled-qr-code ## Dependencies (1) - [qrcode-generator](https://npm.io/package/qrcode-generator.md) ^1.4.4 ## Alternatives - [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads - [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads - [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads - [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads - [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads ## Recent versions - 1.0.0 (latest) — 2022-08-28 ## README # QR Code Styling [![Version](https://img.shields.io/npm/v/styled-qr-code.svg)](https://www.npmjs.org/package/styled-qr-code) JavaScript library for generating QR codes with a logo and styling. This is a fork of the currently unmaintained [repository by kozakdenys](https://github.com/kozakdenys/qr-code-styling) fixing multiple issues: - [#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) - outdated dependencies - release for es2017 Try the old version here https://qr-code-styling.com to get a feel ### Examples

### Installation ``` npm install styled-qr-code ``` or ``` yarn add styled-qr-code ``` ### Usage ```HTML QR Code Styling
``` --- [**React example (Codesandbox)**](https://codesandbox.io/s/qr-code-styling-react-example-l8rwl?file=/src/App.js) [**Angular example (Codesandbox)**](https://codesandbox.io/s/agitated-panini-tpgb2?file=/src/app/app.component.ts) --- [**React example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/react) [**Angular example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/angular) [**Vue example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/vue) --- ### API Documentation #### QRCodeStyling instance `new QRCodeStyling(options) => QRCodeStyling` | Param | Type | Description | | ------- | ------ | ----------- | | options | object | Init object | `options` structure | Property | Type | Default Value | Description | | ----------------------- | ------------------------- | ------------- | --------------------------------------------------------------------------------------------- | | width | number | `300` | Size of canvas | | height | number | `300` | Size of canvas | | type | string (`'canvas' 'svg'`) | `canvas` | The type of the element that will be rendered | | data | string | | The date will be encoded to the QR code | | image | string | | The image will be copied to the center of the QR code | | margin | number | `0` | Margin around canvas | | qrOptions | object | | Options will be passed to `qrcode-generator` lib | | imageOptions | object | | Specific image options, details see below | | dotsOptions | object | | Dots styling options | | cornersSquareOptions | object | | Square in the corners styling options | | cornersDotOptionsHelper | object | | Dots in the corners styling options | | backgroundOptions | object | | QR background styling options | | useLegacyDotRotation | boolean | false | Use the mirrored qr creation strategy of the original library. (Some scanners might not work) | `options.qrOptions` structure | Property | Type | Default Value | | -------------------- | -------------------------------------------------- | ------------- | | typeNumber | number (`0 - 40`) | `0` | | mode | string (`'Numeric' 'Alphanumeric' 'Byte' 'Kanji'`) | | errorCorrectionLevel | string (`'L' 'M' 'Q' 'H'`) | `'Q'` | `options.imageOptions` structure | Property | Type | Default Value | Description | | ------------------ | --------------------------------------- | ------------- | ------------------------------------------------------------------------------ | | hideBackgroundDots | boolean | `true` | Hide all dots covered by the image | | imageSize | number | `0.4` | Coefficient of the image size. Not recommended to use ove 0.5. Lower is better | | margin | number | `0` | Margin of the image in px | | crossOrigin | string(`'anonymous' 'use-credentials'`) | `anonymous` | | `options.dotsOptions` structure | Property | Type | Default Value | Description | | -------- | ------------------------------------------------------------------------------ | ------------- | ------------------- | | color | string | `'#000'` | Color of QR dots | | gradient | object | | Gradient of QR dots | | type | string (`'rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded'`) | `'square'` | Style of QR dots | `options.backgroundOptions` structure | Property | Type | Default Value | | -------- | ------ | ------------- | | color | string | `'#fff'` | | gradient | object | `options.cornersSquareOptions` structure | Property | Type | Default Value | Description | | -------- | ----------------------------------------- | ------------- | -------------------------- | | color | string | | Color of Corners Square | | gradient | object | | Gradient of Corners Square | | type | string (`'dot' 'square' 'extra-rounded'`) | | Style of Corners Square | `options.cornersDotOptions` structure | Property | Type | Default Value | Description | | -------- | ------------------------- | ------------- | ----------------------- | | color | string | | Color of Corners Dot | | gradient | object | | Gradient of Corners Dot | | type | string (`'dot' 'square'`) | | Style of Corners Dot | Gradient structure `options.dotsOptions.gradient` `options.backgroundOptions.gradient` `options.cornersSquareOptions.gradient` `options.cornersDotOptions.gradient` | Property | Type | Default Value | Description | | ---------- | ---------------------------- | ------------- | -------------------------------------------------------------------------------------- | | type | string (`'linear' 'radial'`) | "linear" | Type of gradient spread | | rotation | number | 0 | Rotation of gradient in radians (Math.PI === 180 degrees) | | colorStops | array of objects | | Gradient colors. Example `[{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]` | Gradient colorStops structure `options.dotsOptions.gradient.colorStops[]` `options.backgroundOptions.gradient.colorStops[]` `options.cornersSquareOptions.gradient.colorStops[]` `options.cornersDotOptions.gradient.colorStops[]` | Property | Type | Default Value | Description | | -------- | ---------------- | ------------- | ----------------------------------- | | offset | number (`0 - 1`) | | Position of color in gradient range | | color | string | | Color of stop in gradient range | #### QRCodeStyling methods `QRCodeStyling.append(container) => void` | Param | Type | Description | | --------- | ----------- | -------------------------------------------------------- | | container | DOM element | This container will be used for appending of the QR code | `QRCodeStyling.getRawData(extension) => Promise` | Param | Type | Default Value | Description | | --------- | ------------------------------------ | ------------- | ----------- | | extension | string (`'png' 'jpeg' 'webp' 'svg'`) | `'png'` | Blob type | `QRCodeStyling.update(options) => void` | Param | Type | Description | | ------- | ------ | -------------------------------------- | | options | object | The same options as for initialization | `QRCodeStyling.download(downloadOptions, quality) => Promise` | Param | Type | Description | | --------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | downloadOptions | object | Options with extension and name of file (not required) | | 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. | `downloadOptions` structure | Property | Type | Default Value | Description | | --------- | ------------------------------------ | ------------- | --------------------------- | | name | string | `'qr'` | Name of the downloaded file | | extension | string (`'png' 'jpeg' 'webp' 'svg'`) | `'png'` | File extension | `QRCodeStyling.toDataUrl(extension, quality) => Promise` | Param | Type | Default Value | Description | | --------- | ------------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | extension | string (`'png' 'jpeg' 'webp')` | 'png' | Blob type | | 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. | ### License [MIT License](https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/LICENSE). Copyright (c) 2021 Denys Kozak --- _Source: https://npm.io/package/styled-qr-code · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._