{"_id":"@brainyboxtech/qr-code-styling-bbtech-latest","name":"@brainyboxtech/qr-code-styling-bbtech-latest","dist-tags":{"latest":"1.5.0"},"versions":{"1.5.0":{"name":"@brainyboxtech/qr-code-styling-bbtech-latest","version":"1.5.0","description":"Enhanced QR code styling with new options","main":"lib/qr-code-styling.js","types":"lib/index.d.ts","engines":{"node":">=18.18.0"},"dependencies":{"qrcode-generator":"^1.4.4"},"devDependencies":{"@eslint/js":"^9.12.0","@types/eslint__js":"^8.42.3","@types/jsdom":"^21.1.7","canvas":"^2.11.2","eslint":"^9.12.0","eslint-config-prettier":"^9.1.0","eslint-plugin-jest":"^28.8.3","eslint-webpack-plugin":"^4.2.0","filemanager-webpack-plugin":"^8.0.0","html-webpack-plugin":"^5.6.0","jest":"^29.7.0","jest-fixed-jsdom":"^0.0.4","jsdom":"^25.0.1","prettier":"^3.3.3","ts-jest":"^29.2.5","ts-loader":"^9.5.1","typescript":"^5.6.3","typescript-eslint":"^8.8.1","webpack":"^5.95.0","webpack-cli":"^5.1.4","webpack-dev-server":"^5.1.0","webpack-merge":"^6.0.1"},"scripts":{"build":"webpack --mode=production --config webpack.config.build.js","build:dev":"webpack --mode=development --config webpack.config.build.js","test":"jest","prepublishOnly":"npm run build","publish":"npm publish --access public","version":"npm run build && git add -A lib","start":"webpack serve --open --config webpack.config.dev-server.js","ci:versionup:patch":"npm version patch --no-git-tag-version --yes && npm run commit-version","ci:versionup:minor":"npm version minor --no-git-tag-version --yes && npm run commit-version","ci:versionup:major":"npm version major --no-git-tag-version --yes && npm run commit-version","commit-version":"git add . && git commit -m \"chore(release): v`node -p 'require(\"./package.json\").version'`\"","ci:release":"npm publish --yes"},"repository":{"type":"git","url":"git+https://github.com/kozakdenys/qr-code-styling.git"},"keywords":["qr","qrcode","qr-code","js","qrjs","qrstyling","styling","qrbranding","branding","qrimage","image","qrlogo","logo","design"],"_id":"@brainyboxtech/qr-code-styling-bbtech-latest@1.5.0","gitHead":"337d4705049f7a47551c6a6790788c7a698cf155","bugs":{"url":"https://github.com/kozakdenys/qr-code-styling/issues"},"homepage":"https://github.com/kozakdenys/qr-code-styling#readme","_nodeVersion":"22.15.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-NnYUQ65DY5TbyERaKl1K5j+flPFeYZ7FrqCh2++3FRAI7AD1yG7Fp8Y3beHuQW1zAhikPcT4wAeMuC6jfNzI+Q==","shasum":"99b9eed0d243950f6b190527a6e30bf7c666ad10","tarball":"https://registry.npmjs.org/@brainyboxtech/qr-code-styling-bbtech-latest/-/qr-code-styling-bbtech-latest-1.5.0.tgz","fileCount":43,"unpackedSize":706526,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDTbaQIuOfO5XGyV0HfMwCiIZ1whUBdx4r1cqA3q9OTVQIhAN495w6B3oBUIVzozQsIEZC9ZRJuWdbSsSh/8owmMsf6"}]},"_npmUser":{"name":"brainyboxtech","email":"muhammed.umair@speaklink.net","actor":{"name":"brainyboxtech","email":"muhammed.umair@speaklink.net","type":"user"}},"directories":{},"maintainers":[{"name":"brainyboxtech","email":"muhammed.umair@speaklink.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/qr-code-styling-bbtech-latest_1.5.0_1751474082624_0.27951512416422974"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-02T16:34:42.525Z","1.5.0":"2025-07-02T16:34:42.844Z","modified":"2025-07-02T16:34:43.077Z"},"maintainers":[{"name":"brainyboxtech","email":"muhammed.umair@speaklink.net"}],"description":"Enhanced QR code styling with new options","homepage":"https://github.com/kozakdenys/qr-code-styling#readme","keywords":["qr","qrcode","qr-code","js","qrjs","qrstyling","styling","qrbranding","branding","qrimage","image","qrlogo","logo","design"],"repository":{"type":"git","url":"git+https://github.com/kozakdenys/qr-code-styling.git"},"bugs":{"url":"https://github.com/kozakdenys/qr-code-styling/issues"},"readme":"# QR Code Styling\n[![Version](https://img.shields.io/npm/v/qr-code-styling.svg)](https://www.npmjs.org/package/qr-code-styling)\n\nJavaScript library for generating QR codes with a logo and styling.\n\nTry it here https://qr-code-styling.com\n\nIf you have issues / suggestions / notes / questions, please open an issue or contact me. Let's create a cool library together.\n### Examples\n<p float=\"left\">\n<img style=\"display:inline-block\" src=\"https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/facebook_example_new.png\" width=\"240\" />\n<img style=\"display:inline-block\" src=\"https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/qr_code_example.png\" width=\"240\" />\n<img style=\"display:inline-block\" src=\"https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/telegram_example_new.png\" width=\"240\" />\n</p>\n\n### Extensions\n\nIf you would like to use additional stiles, you can connect extensions.\n#### [qr-border-plugin](https://www.npmjs.com/package/qr-border-plugin)\n\n<p float=\"left\">\n<img style=\"display:inline-block\" src=\"https://www.lefe.dev/_static/packages/qr-border-plugin-1.svg\" width=\"240\" />\n<img style=\"display:inline-block\" src=\"https://www.lefe.dev/_static/packages/qr-border-plugin-2.svg\" width=\"240\" />\n</p>\n\n\n### Installation\n\n```\nnpm install qr-code-styling\n```\n\n### Usage\n\n```HTML\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>QR Code Styling</title>\n    <script type=\"text/javascript\" src=\"https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js\"></script>\n</head>\n<body>\n<div id=\"canvas\"></div>\n<script type=\"text/javascript\">\n\n    const qrCode = new QRCodeStyling({\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\n    qrCode.append(document.getElementById(\"canvas\"));\n    qrCode.download({ name: \"qr\", extension: \"svg\" });\n</script>\n</body>\n</html>\n```\n---\n\n[**React example (Codesandbox)**](https://codesandbox.io/s/qr-code-styling-react-example-l8rwl?file=/src/App.js)\n\n[**Angular example (Codesandbox)**](https://codesandbox.io/s/agitated-panini-tpgb2?file=/src/app/app.component.ts)\n\n---\n\n[**React example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/react)\n\n[**Angular example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/angular)\n\n[**Vue example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/vue)\n\n[**Node.js example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/nodejs)\n\n[**Next.js example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/nextjs)\n\n---\n\n### API Documentation\n\n#### QRCodeStyling instance\n`new QRCodeStyling(options) => QRCodeStyling`\n\nParam  |Type  |Description\n-------|------|------------\noptions|object|Init object\n\n`options` structure\n\nProperty               | Type                       |Default Value|Description\n-----------------------|----------------------------|---------|-----------------------------------------------------\nwidth                  | number                     |`300`    |Size of canvas\nheight                 | number                     |`300`    |Size of canvas\ntype                   | string (`'canvas' 'svg'`)  |`canvas` |The type of the element that will be rendered\nshape                  | string (`'square' 'circle')|`square` |The shape of the qr-code, circle shape adds rundom extra dots arround\ndata                   | string                     |         |The data will be encoded to the QR code\nimage                  | string                     |         |The image will be copied to the center of the QR code\nmargin                 | number                     |`0`      |Margin around canvas\nqrOptions              | object                     |         |Options will be passed to `qrcode-generator` lib\nimageOptions           | object                     |         |Specific image options, details see below\ndotsOptions            | object                     |         |Dots styling options\ncornersSquareOptions   | object                     |         |Square in the corners styling options\ncornersDotOptions      | object                     |         |Dots in the corners styling options\nbackgroundOptions      | object                     |         |QR background styling options\nnodeCanvas             | node-canvas                |         |Only specify when running on a node server for canvas type, please refer to node section below\njsDom                  | jsdom                      |         |Only specify when running on a node server for svg type, please refer to node section below\n\n`options.qrOptions` structure\n\nProperty            |Type                                              |Default Value\n--------------------|--------------------------------------------------|-------------\ntypeNumber          |number (`0 - 40`)                                 |`0`\nmode                |string (`'Numeric' 'Alphanumeric' 'Byte' 'Kanji'`)|\nerrorCorrectionLevel|string (`'L' 'M' 'Q' 'H'`)                        |`'Q'`\n\n`options.imageOptions` structure\n\nProperty          |Type                                   | Default Value |Description\n------------------|---------------------------------------|---------------|------------------------------------------------------------------------------\nhideBackgroundDots|boolean                                | `true`        |Hide all dots covered by the image\nimageSize         |number                                 | `0.4`         |Coefficient of the image size. Not recommended to use ove 0.5. Lower is better\nmargin            |number                                 | `0`           |Margin of the image in px\ncrossOrigin       |string(`'anonymous' 'use-credentials'`)|               |Set \"anonymous\" if you want to download QR code from other origins.\nsaveAsBlob        |boolean                                | `true`        |Saves image as base64 blob in svg type, see bellow\n\nWhen QR type is svg, the image may not load in certain applications as it is saved as a url, and some svg applications will not render url images for security reasons. Setting `saveAsBlob` to true will instead save the image as a blob, allowing it to render correctly in more places, but will also increase the file size.\n\n`options.dotsOptions` structure\n\nProperty | Type                                                                           | Default Value |Description\n-------- |--------------------------------------------------------------------------------|---------------|-------------------\ncolor    | string                                                                         | `'#000'`      |Color of QR dots\ngradient | object                                                                         |               |Gradient of QR dots\ntype     | string (`'rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded'`) | `'square'`    |Style of QR dots\nroundSize| boolean                                                                        | true          |Whether to round dots size to integer. `true` value might create extra margin around qr code. If `false`, [shape-rendering=\"crispEdges\"](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering#crispedges) will be applied to SVG element.\n\n`options.backgroundOptions` structure\n\nProperty|Type                                              |Default Value\n--------|--------------------------------------------------|-------------\ncolor   |string (`'#fff' 'rgb(255,255,255)' 'transparent'`)|`'#fff'`\ngradient|object                                            |\n\n`options.cornersSquareOptions` structure\n\nProperty| Type                                       |Default Value|Description\n--------|--------------------------------------------|-------------|-----------------\ncolor   | string                                     |             |Color of Corners Square\ngradient| object                                     |             |Gradient of Corners Square\ntype    | string (`'dot' 'square' 'extra-rounded' 'rounded' 'dots' 'classy' 'classy-rounded'`) |             |Style of Corners Square\n\n`options.cornersDotOptions` structure\n\nProperty| Type                       |Default Value|Description\n--------|----------------------------|-------------|-----------------\ncolor   | string                     |             |Color of Corners Dot\ngradient| object                     |             |Gradient of Corners Dot\ntype    | string (`'dot' 'square' 'rounded' 'dots' 'classy' 'classy-rounded' 'extra-rounded'`) |             |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\nProperty  |Type                        |Default Value|Description\n----------|----------------------------|-------------|---------------------------------------------------------\ntype      |string (`'linear' 'radial'`)|\"linear\"     |Type of gradient spread\nrotation  |number                      |0            |Rotation of gradient in radians (Math.PI === 180 degrees)\ncolorStops|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\nProperty|Type            |Default Value|Description\n--------|----------------|-------------|-----------------------------------\noffset  |number (`0 - 1`)|             |Position of color in gradient range\ncolor   |string          |             |Color of stop in gradient range\n\n#### QRCodeStyling methods\n`QRCodeStyling.append(container) => void`\n\nParam    |Type       |Description\n---------|-----------|-----------\ncontainer|DOM element|This container will be used for appending of the QR code\n\n`QRCodeStyling.getRawData(extension) => Promise<Blob>`\n\nParam    |Type                                |Default Value|Description\n---------|------------------------------------|-------------|------------\nextension|string (`'png' 'jpeg' 'webp' 'svg'`)|`'png'`      |Blob type on browser, Buffer type on Node\n\n`QRCodeStyling.update(options) => void`\n\nParam  |Type  |Description\n-------|------|--------------------------------------\noptions|object|The same options as for initialization\n\n`QRCodeStyling.applyExtension(extension) => void`\n\nParam    |Type                  |Description\n---------|----------------------|------------------------------------------------------------------------------------------\nextension|(svg, options) => void|Extension is a function that takes svg and previously applied options and modifies an svg\n\n`applyExtension` example\n\n```JS\nconst extension = (svg, options) => {\n    const { width, height } = options;\n    const size = Math.min(width, height);\n    const border = document.createElementNS(\"http://www.w3.org/2000/svg\", \"rect\");\n    const borderAttributes = {\n        \"fill\": \"none\",\n        \"x\": (width - size + 40) / 2,\n        \"y\": (height - size + 40) / 2,\n        \"width\": size - 40,\n        \"height\": size - 40,\n        \"stroke\": 'black',\n        \"stroke-width\": 40,\n        \"rx\": 100,\n    };\n    Object.keys(borderAttributes).forEach(attribute => {\n      border.setAttribute(attribute, borderAttributes[attribute]);\n    });\n    svg.appendChild(border);\n};\n```\n\n`QRCodeStyling.deleteExtension() => void`\n\n`QRCodeStyling.download(downloadOptions) => Promise<void>`\n\nParam          |Type  |Description\n---------------|------|------------\ndownloadOptions|object|Options with extension and name of file (not required)\n\nPromise returned will resolve into the data URI of the QR code image.\n\n`downloadOptions` structure\n\nProperty |Type                                |Default Value|Description\n---------|------------------------------------|-------------|-----------------------------------------------------\nname     |string                              |`'qr'`       |Name of the downloaded file\nextension|string (`'png' 'jpeg' 'webp' 'svg'`)|`'png'`      |File extension\n### Building this repo\n\nIf you get an error running `npm install` referring to `node-pre-gyp`, this is caused by an attempt to compile the [`canvas` dependency](https://github.com/Automattic/node-canvas#compiling). See Compiling instructions in the README. For example on MacOS you need to install dependencies: `brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman`.\n\n### Node Support\nYou can use this on a node server by passing through the node-canvas or jsdom object depending if your creating a non-svg or svg respectively. You must pass both if using `imageOptions.saveAsBlob`.\n\nCalling `getRawData` in node will return a Buffer instead of a Blob.\n\n```js\nconst { QRCodeStyling } = require(\"qr-code-styling/lib/qr-code-styling.common.js\");\nconst nodeCanvas = require(\"canvas\");\nconst { JSDOM } = require(\"jsdom\");\nconst fs = require(\"fs\");\n\nconst options = {\n    width: 300,\n    height: 300,\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\n// For canvas type\nconst qrCodeImage = new QRCodeStyling({\n    jsdom: JSDOM, // this is required\n    nodeCanvas, // this is required,\n    ...options,\n    imageOptions: {\n        saveAsBlob: true,\n        crossOrigin: \"anonymous\",\n        margin: 20\n    },\n});\n\nqrCodeImage.getRawData(\"png\").then((buffer) => {\n  fs.writeFileSync(\"test.png\", buffer);\n});\n\n// For svg type\nconst qrCodeSvg = new QRCodeStyling({\n    jsdom: JSDOM, // this is required\n    type: \"svg\",\n    ...options\n});\n\nqrCodeSvg.getRawData(\"svg\").then((buffer) => {\n  fs.writeFileSync(\"test.svg\", buffer);\n});\n\n// For svg type with the inner-image saved as a blob\n// (inner-image will render in more places but file will be larger)\nconst qrCodeSvgWithBlobImage = new QRCodeStyling({\n    jsdom: JSDOM, // this is required\n    nodeCanvas, // this is required\n    type: \"svg\",\n    ...options,\n    imageOptions: {\n        saveAsBlob: true,\n        crossOrigin: \"anonymous\",\n        margin: 20\n    }\n});\n\nqrCodeSvgWithBlobImage.getRawData(\"svg\").then((buffer) => {\n  fs.writeFileSync(\"test_blob.svg\", buffer);\n});\n\n```\n\n### License\n\n[MIT License](https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/LICENSE). Copyright (c) 2021 Denys Kozak\n","readmeFilename":"README.md","_rev":"1-c9ded69d295a6da30e52187499151008"}