{"_id":"@deltazero/react-qr-svg","_rev":"2-002c0546c836c28eefbb3e7979a8f952","name":"@deltazero/react-qr-svg","dist-tags":{"latest":"0.0.1-semantic-release"},"versions":{"0.0.0-semantic-release":{"name":"@deltazero/react-qr-svg","description":"React.js component for SVG QR codes","author":{"name":"Dan Homola"},"user":"no23reason","version":"0.0.0-semantic-release","scripts":{"dist":"rimraf ./dist-modules && babel ./src --out-dir ./dist-modules","gh-pages":"npm run gh-pages:build && npm run gh-pages:deploy","gh-pages:build":"catalog build docs -u ./","gh-pages:deploy":"gh-pages -d docs/build","prepublishOnly":"npm run dist","prepush":"npm run test:lint && npm run test:js","precommit":"pretty-quick --staged","start":"catalog start docs","test:js":"jest --coverage","test:lint":"eslint . --ext .js --ext .jsx --ignore-path .gitignore --ignore-pattern dist --ignore-pattern docs --cache","test:tdd":"jest --watch","test:ts":"typings-tester --config ./tests/typescript/tsconfig.json ./tests/typescript/index.tsx","test":"npm run test:lint && npm run test:js && npm run test:ts"},"main":"dist-modules","typings":"./index.d.ts","dependencies":{"prop-types":"^15.5.8","qr.js":"0.0.0"},"devDependencies":{"@types/react":"^17.0.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^10.0.0","babel-jest":"^23.0.0","babel-plugin-syntax-dynamic-import":"^6.18.0","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-es2015-destructuring":"^6.23.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","catalog":"^3.2.4","cz-conventional-changelog":"^3.1.0","eslint":"^7.1.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.1.3","eslint-plugin-react":"^7.7.0","gh-pages":"^3.1.0","jest":"^23.6.0","prettier":"^2.0.5","pretty-quick":"^3.1.0","purecss":"^2.0.3","react":"^17.0.1","react-dom":"^17.0.1","react-github-corner":"^2.1.0","react-test-renderer":"^17.0.1","rimraf":"^3.0.0","semantic-release":"^17.0.4","typescript":"^3.0.3","typings-tester":"^0.3.2"},"peerDependencies":{"react":">= 0.11.2 < 18.0.0"},"repository":{"type":"git","url":"git+https://github.com/no23reason/react-qr-svg.git"},"homepage":"https://no23reason.github.io/react-qr-svg/","bugs":{"url":"https://github.com/no23reason/react-qr-svg/issues"},"keywords":["react","reactjs","qr-code","qr","svg"],"license":"MIT","config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"directories":{"doc":"docs","test":"tests"},"gitHead":"d333f36952f685395ccdcc2a48e11223bfed3fd0","_id":"@deltazero/react-qr-svg@0.0.0-semantic-release","_nodeVersion":"15.5.1","_npmVersion":"7.7.6","dist":{"integrity":"sha512-lqq4VE/b+qy5Iw1dLugZMrRCvL2NwPJLTQWY2QPxIyaR5EeyXKLEAKJJ3iYRfUKRIAOafEABCsfWFRpYxbqjkQ==","shasum":"7d5c30db11f3d7fdde6745d600a5606e58f4369f","tarball":"https://registry.npmjs.org/@deltazero/react-qr-svg/-/react-qr-svg-0.0.0-semantic-release.tgz","fileCount":8,"unpackedSize":12739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh1I1CRA9TVsSAnZWagAAe54P/jOXUVpkxsb4FUeGWAVO\nbnuu5/yQvZJR2S82Kw+DtFusYe9IBqWntWW+OlA8Kf6S/v5xos/GlDt2jzMG\nFXMOAdw7HPc6xTsN6WQLH5ZFsWlbW0QghBIXq5Jqfj961LVXPmBWbzo7GD4p\nphq9/AMffo5x2VsbnWlBAatDuar8KOL0+BH+eSi0wUIBXXpFaprHMhV41cf2\nDPPKPCR4YPsqD8eYRzwcKefSAubx0tiQtU9ayyY3nUrPjQM4BG86utcmRvFV\nU7geX/caY56TKuIniO21NXROay5nC70m/qnB5aan4XT+TjazRfiVdG05aqqa\n6hH5Z86FOvcY6lBQUjGwMza2OZU/QzH73Supbyjf8ZM3tILYTuRJtl6fJ4Cz\nie/hL3OqXBC3efmaGoA9+OHmF7SmtC/b9JiDxovaUX8jMXKKtr3y58yQEHSF\nu17wAstQYExR2lyIjT2eKmNb1EVIHd9Zfr8ColTtq/+Wwdet+a09DUgTYRTY\n5x+iBw4/nvZdlRw+DvnN6mrFgxzby92jZDk6IwKmjDxrWQpgTF5ZjpD27rVJ\ndZLYbsbNI+k79+5/pdFxq+kH2ZR0QG81D5kBlg/fe3rJ2E52MFNur05xs4AK\n0SZt3v1hJ3RQOXYXLPCSvJB+oPwQalm6yJZmil+i3BhlNufi4dLBWnepCVcu\nJU4K\r\n=c9DO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEV+tKpx7357G8oDxUFypPNmG+sdW76SL/u38QqsnQvtAiAzJNN/GDGAAMcxTe+oNqhqCHXmD6rEsFSL3aJ3/hunWQ=="}]},"_npmUser":{"name":"deltazero","email":"david@deltazero.cz"},"maintainers":[{"name":"deltazero","email":"david@deltazero.cz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-qr-svg_0.0.0-semantic-release_1619481140438_0.5992636756561394"},"_hasShrinkwrap":false},"0.0.1-semantic-release":{"name":"@deltazero/react-qr-svg","description":"React.js component for SVG QR codes","author":{"name":"Dan Homola"},"user":"no23reason","version":"0.0.1-semantic-release","scripts":{"dist":"rimraf ./dist-modules && babel ./src --out-dir ./dist-modules","gh-pages":"npm run gh-pages:build && npm run gh-pages:deploy","gh-pages:build":"catalog build docs -u ./","gh-pages:deploy":"gh-pages -d docs/build","prepublishOnly":"npm run dist","prepush":"npm run test:lint && npm run test:js","precommit":"pretty-quick --staged","start":"catalog start docs","test:js":"jest --coverage","test:lint":"eslint . --ext .js --ext .jsx --ignore-path .gitignore --ignore-pattern dist --ignore-pattern docs --cache","test:tdd":"jest --watch","test:ts":"typings-tester --config ./tests/typescript/tsconfig.json ./tests/typescript/index.tsx","test":"npm run test:lint && npm run test:js && npm run test:ts"},"main":"dist-modules","typings":"./index.d.ts","dependencies":{"prop-types":"^15.5.8","qr.js":"0.0.0"},"devDependencies":{"@types/react":"^17.0.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^10.0.0","babel-jest":"^23.0.0","babel-plugin-syntax-dynamic-import":"^6.18.0","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-es2015-destructuring":"^6.23.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","catalog":"^3.2.4","cz-conventional-changelog":"^3.1.0","eslint":"^7.1.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.1.3","eslint-plugin-react":"^7.7.0","gh-pages":"^3.1.0","jest":"^23.6.0","prettier":"^2.0.5","pretty-quick":"^3.1.0","purecss":"^2.0.3","react":"^17.0.1","react-dom":"^17.0.1","react-github-corner":"^2.1.0","react-test-renderer":"^17.0.1","rimraf":"^3.0.0","semantic-release":"^17.0.4","typescript":"^3.0.3","typings-tester":"^0.3.2"},"peerDependencies":{"react":">= 0.11.2 < 18.0.0"},"repository":{"type":"git","url":"git+https://github.com/no23reason/react-qr-svg.git"},"homepage":"https://no23reason.github.io/react-qr-svg/","bugs":{"url":"https://github.com/no23reason/react-qr-svg/issues"},"keywords":["react","reactjs","qr-code","qr","svg"],"license":"MIT","config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"d792d7742163cbd261a34923b7f05c02c7e0623b","_id":"@deltazero/react-qr-svg@0.0.1-semantic-release","_nodeVersion":"15.5.1","_npmVersion":"7.7.6","dist":{"integrity":"sha512-Okf91D/7YY9b6AoYoUMlnm+durZixbWuN2uyRtprIH81sn63o6C/j8KtMLmk8/qKjB6Un4VPFKLUf1B4yD1B6g==","shasum":"2f433aebbf420dba2d1e2121feb0838ee1b5d4c2","tarball":"https://registry.npmjs.org/@deltazero/react-qr-svg/-/react-qr-svg-0.0.1-semantic-release.tgz","fileCount":8,"unpackedSize":13471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh1k7CRA9TVsSAnZWagAAjFgP/33UOleiGS0fe9PE6xEu\nIJ1nDFG4KJ7IpUJqgCv5+tF5ltr/XCtooBtdjwEJl0KYC6gEAUnZ3Ki8aZey\nAP3wB2mgV+cy/5Wjjt36DF9ArvbwMjE6GcSgygWBC5y0VyvsygWuaqyrM9d+\nkEQDt8HNEgQQ5BT6+sGRJU549SbO841JyUZUVurRd96LnTpJps+QIx5Zb8wz\ne+RX9d7ZUHirc0ruC6k+RLBog+KC20zKeWMfWPXdzJYbDWBixtKnwcDmUZSR\nhzV4l35qa3nknRlgkFHMV60Y0nvVbAyEEfp6veoU3jytqhWtieKclgdBYwN7\nMdxri0IZk25Y4YB9l19wJPYzRdDFZ0W7WyLUcapa4WYuMtXTFbCjXGdYbIlI\nH8ePoAU8SWFrE6zNgBUJFyI/qCgoNrufZ5RV2rYrW5AaBJP2DT6AY/6H9wsO\nh1JGFGkmFwZqAD5ByGCdbIyDWjOJq6upvYkGACUz6wczcj3rj/kGfuZotNcj\nIHXWWM4rbuggQB4eCy3b1GUoAeFewJK5kWkNQtgoNgz108T8+MzArPQaeW2+\nHFHjRbgv9s0B5Ql+n6jPJZvCSbwPcdNyPjM2Sbxge5S2nmSmqRRc/wFlhqec\nuNCcrVUMSVsry3OfIvwWuIW2QDj4YOj+RXThgfnRJFu+wapukXtVuwy63JC+\nEEZj\r\n=iKHe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwZ5wsRRA2ybojjVhZtmBDb6WxzrKxq3zHRd05w7gc0AIhANGJRy215TpJKkcqDHL1l0lEjVIazYp8sioyJNlxdSVu"}]},"_npmUser":{"name":"deltazero","email":"david@deltazero.cz"},"directories":{},"maintainers":[{"name":"deltazero","email":"david@deltazero.cz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-qr-svg_0.0.1-semantic-release_1619482939330_0.32157423500627424"},"_hasShrinkwrap":false}},"time":{"created":"2021-04-26T23:52:20.369Z","0.0.0-semantic-release":"2021-04-26T23:52:20.583Z","modified":"2022-04-05T03:43:04.809Z","0.0.1-semantic-release":"2021-04-27T00:22:19.506Z"},"maintainers":[{"name":"deltazero","email":"david@deltazero.cz"}],"description":"React.js component for SVG QR codes","homepage":"https://no23reason.github.io/react-qr-svg/","keywords":["react","reactjs","qr-code","qr","svg"],"repository":{"type":"git","url":"git+https://github.com/no23reason/react-qr-svg.git"},"author":{"name":"Dan Homola"},"bugs":{"url":"https://github.com/no23reason/react-qr-svg/issues"},"license":"MIT","readme":"![Node.js CI](https://github.com/no23reason/react-qr-svg/workflows/Node.js%20CI/badge.svg) [![npm version](https://img.shields.io/npm/v/react-qr-svg.svg)](https://www.npmjs.com/package/react-qr-svg) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n# react-qr-svg\n\nReact component for rendering SVG QR codes\n\n## Demo\n\nBasic demo can be found at the [demo page](https://no23reason.github.io/react-qr-svg/#/demo).\n\n## Why SVG?\n\nMost of the existing React components for QR (namely [`qrcode.react`](https://github.com/zpao/qrcode.react), which was used as a starting point for this project) use `<canvas>` for rendering.\n\nThis is fine for most scenarios, however when trying to print such code, it gets blurry. This is caused by the fact that `<canvas>` contents get rastered and _then_ scaled in the process resulting in the blurriness.\n\nOn the other hand, SVG retains the vector information of its contents and therefore is scaled properly when printed.\n\n## Basic Usage\n\nInstall using `npm`:\n\n```js\nnpm install react-qr-svg --save\n```\n\nThen use in your application like this:\n\n```js\nimport React from \"react\";\nimport { QRCode } from \"react-qr-svg\";\n\nclass Demo extends React.Component {\n    render() {\n        return (\n            <QRCode\n                bgColor=\"#FFFFFF\"\n                fgColor=\"#000000\"\n                level=\"Q\"\n                style={{ width: 256 }}\n                value=\"some text\"\n            />\n        );\n    }\n}\n```\n\n## Props\n\nThe props available are (shown with default values):\n\n```js\n{\n    value: '', // The value to encode in the code\n    level: 'L', // QR Error correction level\n    bgColor: '#FFFFFF', // Color of the bright squares\n    fgColor: '#000000', // Color of the dark squares\n    cellClassPrefix: '', // Prefix of the CSS classes, if specified, bgColor and fgColor are ignored\n    transparent: false, // Transparent SVG omitting dark sqaures\n    rectProps: {}, // Props passed to <rect> elements, like { rx: 1 } for round rectangles \n}\n```\n\nThe `level` prop corresponds to [Error correction level](https://en.wikipedia.org/wiki/QR_code#Error_correction) so the valid values are `L`, `M`, `Q` and `H`.\n\nYou can also specify all the props that are valid for the `<svg>` React element (e.g. `style`, `className` or `width` which you can use to specify the size of the QR code).\n\nAlso, you may opt-in for transparency. This option omits dark squares, saves DOM about 30-50% of it's nodes and makes the SVG single color over transparent background. Using this, `fgColor` is applied on the whole `<svg>` instead of every `<rect>`.   \n\n## CSS styling\n\nYou can use CSS to set the QR code colors instead of the `bgColor` and `fgColor` props. You just need to specify the `cellClassPrefix` prop and three CSS classes will become available for you to style.\n\nLet's say you used `my-qr-code` as the `cellClassPrefix`. The generated classes are:\n\n*   `my-qr-code-cell` for all the cells\n*   `my-qr-code-cell-empty` for the empty cells\n*   `my-qr-code-cell-filled` for the filled cells\n\nYou can then set the colors using the `fill` CSS property. See [CSS Demo](https://no23reason.github.io/react-qr-svg/#/css-demo) for an example.\n\n**Note**: If you specify `cellClassPrefix`, `bgColor` and `fgColor` values are ignored.\n\n## Acknowledgements\n\nThis project is heavily inspired by the [`qrcode.react`](https://github.com/zpao/qrcode.react) project.\n\nThis project uses the [`react-component-boilerplate`](https://github.com/survivejs/react-component-boilerplate).\n\n## License\n\n_react-qr-svg_ is available under MIT. See [LICENSE](https://github.com/no23reason/react-qr-svg/tree/master/LICENSE) for more details.\n","readmeFilename":"README.md"}