# @mithrandirii/qr-code-styling > Add a style and an image to your QR code Latest version **1.3.3** (published 2020-10-15) · MIT license · 0 weekly downloads ## Install ```sh npm install @mithrandirii/qr-code-styling pnpm add @mithrandirii/qr-code-styling yarn add @mithrandirii/qr-code-styling bun add @mithrandirii/qr-code-styling ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.3.3 | | Published | 2020-10-15 | | First published | 2020-10-15 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 246.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Denys Kozak | | Maintainers | mithrandirii | | Keywords | qr, qrcode, qr-code, js, qrjs, qrstyling, styling, qrbranding, branding, qrimage, image, qrlogo, logo | ## Links - npm: https://www.npmjs.com/package/@mithrandirii/qr-code-styling - Repository: https://github.com/mithrandirii/qr-code-styling - Homepage: https://qrcodestyling.com/ - Issues: https://github.com/kozakdenys/qr-code-styling/issues - npm.io page: https://npm.io/package/@mithrandirii/qr-code-styling ## Dependencies (2) - [qrcode-generator](https://npm.io/package/qrcode-generator.md) ^1.4.3 - [@mithrandirii/canvas2svg](https://npm.io/package/@mithrandirii/canvas2svg.md) ^1.0.24 ## 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.3.3 (latest) — 2020-10-15 - 1.3.2 — 2020-10-15 - 1.3.1 — 2020-10-15 - 1.3.0 — 2020-10-15 ## README # QR Code Styling [![Version](https://img.shields.io/npm/v/qr-code-styling.svg)](https://www.npmjs.org/package/qr-code-styling) JavaScript library for generating QR codes with a logo and styling. If you have issues / suggestions / notes / questions, please open an issue or contact me. Let's create a usable library together. ### Examples

### Installation ``` npm install qr-code-styling ``` ### Ussage ```HTML QR Code Styling
``` ### 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 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 qrOptions |object| |Options will be passed to `qrcode-generator` lib imageOptions |object| |Specific image options, details see below dotsOptions |object| |Dots styling options backgroundOptions|object| |QR background styling options `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 crossOrigin |string(`'anonymous' 'use-credentials'`)| |Set "anonymous" if you want to download QR code from other origins. `options.dotsOptions` structure Property|Type |Default Value|Description --------|------------------------------------|-------------|----------------- color |string |`'#000'` |Color of QR dots type |string (`'rounded' 'dots' 'square'`)|`'default'` |Style of QR dots `options.backgroundOptions` structure Property|Type |Default Value --------|------|------------- color |string|`'#fff'` #### QRCodeStyling methods `QRCodeStyling.append(container) => void` Param |Type |Description ---------|-----------|----------- container|DOM element|This container will be used for appending of the QR code `QRCodeStyling.update(options) => void` Param |Type |Description -------|------|-------------------------------------- options|object|The same options as for initialization `QRCodeStyling.download(downloadOptions) => void` Param |Type |Description ---------------|------|------------ downloadOptions|object|Options with extension and name of file (not required) `downloadOptions` structure Property |Type |Default Value|Description ---------|------------------------------|-------------|----------------------------------------------------- name |string |`'qr'` |Name of the downloaded file extension|string (`'png' 'jpeg' 'webp'`)|`'png'` |File extension ### License [MIT License](https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/LICENSE). Copyright (c) 2020 Denys Kozak --- _Source: https://npm.io/package/@mithrandirii/qr-code-styling · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._