Socket
Socket
Sign inDemoInstall

qrcode.react

Package Overview
Dependencies
4
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.0.0 to 3.0.0

lib/esm/index.js

1286

lib/index.js

@@ -1,150 +0,695 @@

'use strict';
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
// src/index.tsx
var src_exports = {};
__export(src_exports, {
QRCodeCanvas: () => QRCodeCanvas,
QRCodeSVG: () => QRCodeSVG,
default: () => QRCode
});
module.exports = __toCommonJS(src_exports);
var import_react = __toESM(require("react"));
var _excluded = ["value", "size", "level", "bgColor", "fgColor", "style", "includeMargin", "imageSettings"],
_excluded2 = ["value", "size", "level", "bgColor", "fgColor", "includeMargin", "imageSettings"],
_excluded3 = ["renderAs"];
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var React = require('react');
var PropTypes = require('prop-types'); // qr.js doesn't handle error level of zero (M) so we need to do it right,
// thus the deep require.
var QRCodeImpl = require('qr.js/lib/QRCode');
var ErrorCorrectLevel = require('qr.js/lib/ErrorCorrectLevel'); // TODO: pull this off of the QRCode class type so it matches.
// Convert from UTF-16, forcing the use of byte-mode encoding in our QR Code.
// This allows us to encode Hanji, Kanji, emoji, etc. Ideally we'd do more
// detection and not resort to byte-mode if possible, but we're trading off
// a smaller library for a smaller amount of data we can potentially encode.
// Based on http://jonisalonen.com/2012/from-utf-16-to-utf-8-in-javascript/
function convertStr(str) {
var out = '';
for (var i = 0; i < str.length; i++) {
var charcode = str.charCodeAt(i);
if (charcode < 0x0080) {
out += String.fromCharCode(charcode);
} else if (charcode < 0x0800) {
out += String.fromCharCode(0xc0 | charcode >> 6);
out += String.fromCharCode(0x80 | charcode & 0x3f);
} else if (charcode < 0xd800 || charcode >= 0xe000) {
out += String.fromCharCode(0xe0 | charcode >> 12);
out += String.fromCharCode(0x80 | charcode >> 6 & 0x3f);
out += String.fromCharCode(0x80 | charcode & 0x3f);
} else {
// This is a surrogate pair, so we'll reconsitute the pieces and work
// from that
i++;
charcode = 0x10000 + ((charcode & 0x3ff) << 10 | str.charCodeAt(i) & 0x3ff);
out += String.fromCharCode(0xf0 | charcode >> 18);
out += String.fromCharCode(0x80 | charcode >> 12 & 0x3f);
out += String.fromCharCode(0x80 | charcode >> 6 & 0x3f);
out += String.fromCharCode(0x80 | charcode & 0x3f);
// src/third-party/qrcodegen/index.ts
/**
* @license QR Code generator library (TypeScript)
* Copyright (c) Project Nayuki.
* SPDX-License-Identifier: MIT
*/
var qrcodegen;
((qrcodegen2) => {
const _QrCode = class {
constructor(version, errorCorrectionLevel, dataCodewords, msk) {
this.version = version;
this.errorCorrectionLevel = errorCorrectionLevel;
this.modules = [];
this.isFunction = [];
if (version < _QrCode.MIN_VERSION || version > _QrCode.MAX_VERSION)
throw "Version value out of range";
if (msk < -1 || msk > 7)
throw "Mask value out of range";
this.size = version * 4 + 17;
let row = [];
for (let i = 0; i < this.size; i++)
row.push(false);
for (let i = 0; i < this.size; i++) {
this.modules.push(row.slice());
this.isFunction.push(row.slice());
}
this.drawFunctionPatterns();
const allCodewords = this.addEccAndInterleave(dataCodewords);
this.drawCodewords(allCodewords);
if (msk == -1) {
let minPenalty = 1e9;
for (let i = 0; i < 8; i++) {
this.applyMask(i);
this.drawFormatBits(i);
const penalty = this.getPenaltyScore();
if (penalty < minPenalty) {
msk = i;
minPenalty = penalty;
}
this.applyMask(i);
}
}
assert(0 <= msk && msk <= 7);
this.mask = msk;
this.applyMask(msk);
this.drawFormatBits(msk);
this.isFunction = [];
}
static encodeText(text, ecl) {
const segs = qrcodegen2.QrSegment.makeSegments(text);
return _QrCode.encodeSegments(segs, ecl);
}
static encodeBinary(data, ecl) {
const seg = qrcodegen2.QrSegment.makeBytes(data);
return _QrCode.encodeSegments([seg], ecl);
}
static encodeSegments(segs, ecl, minVersion = 1, maxVersion = 40, mask = -1, boostEcl = true) {
if (!(_QrCode.MIN_VERSION <= minVersion && minVersion <= maxVersion && maxVersion <= _QrCode.MAX_VERSION) || mask < -1 || mask > 7)
throw "Invalid value";
let version;
let dataUsedBits;
for (version = minVersion; ; version++) {
const dataCapacityBits2 = _QrCode.getNumDataCodewords(version, ecl) * 8;
const usedBits = QrSegment.getTotalBits(segs, version);
if (usedBits <= dataCapacityBits2) {
dataUsedBits = usedBits;
break;
}
if (version >= maxVersion)
throw "Data too long";
}
for (const newEcl of [_QrCode.Ecc.MEDIUM, _QrCode.Ecc.QUARTILE, _QrCode.Ecc.HIGH]) {
if (boostEcl && dataUsedBits <= _QrCode.getNumDataCodewords(version, newEcl) * 8)
ecl = newEcl;
}
let bb = [];
for (const seg of segs) {
appendBits(seg.mode.modeBits, 4, bb);
appendBits(seg.numChars, seg.mode.numCharCountBits(version), bb);
for (const b of seg.getData())
bb.push(b);
}
assert(bb.length == dataUsedBits);
const dataCapacityBits = _QrCode.getNumDataCodewords(version, ecl) * 8;
assert(bb.length <= dataCapacityBits);
appendBits(0, Math.min(4, dataCapacityBits - bb.length), bb);
appendBits(0, (8 - bb.length % 8) % 8, bb);
assert(bb.length % 8 == 0);
for (let padByte = 236; bb.length < dataCapacityBits; padByte ^= 236 ^ 17)
appendBits(padByte, 8, bb);
let dataCodewords = [];
while (dataCodewords.length * 8 < bb.length)
dataCodewords.push(0);
bb.forEach((b, i) => dataCodewords[i >>> 3] |= b << 7 - (i & 7));
return new _QrCode(version, ecl, dataCodewords, mask);
}
getModule(x, y) {
return 0 <= x && x < this.size && 0 <= y && y < this.size && this.modules[y][x];
}
getModules() {
return this.modules;
}
drawFunctionPatterns() {
for (let i = 0; i < this.size; i++) {
this.setFunctionModule(6, i, i % 2 == 0);
this.setFunctionModule(i, 6, i % 2 == 0);
}
this.drawFinderPattern(3, 3);
this.drawFinderPattern(this.size - 4, 3);
this.drawFinderPattern(3, this.size - 4);
const alignPatPos = this.getAlignmentPatternPositions();
const numAlign = alignPatPos.length;
for (let i = 0; i < numAlign; i++) {
for (let j = 0; j < numAlign; j++) {
if (!(i == 0 && j == 0 || i == 0 && j == numAlign - 1 || i == numAlign - 1 && j == 0))
this.drawAlignmentPattern(alignPatPos[i], alignPatPos[j]);
}
}
this.drawFormatBits(0);
this.drawVersion();
}
drawFormatBits(mask) {
const data = this.errorCorrectionLevel.formatBits << 3 | mask;
let rem = data;
for (let i = 0; i < 10; i++)
rem = rem << 1 ^ (rem >>> 9) * 1335;
const bits = (data << 10 | rem) ^ 21522;
assert(bits >>> 15 == 0);
for (let i = 0; i <= 5; i++)
this.setFunctionModule(8, i, getBit(bits, i));
this.setFunctionModule(8, 7, getBit(bits, 6));
this.setFunctionModule(8, 8, getBit(bits, 7));
this.setFunctionModule(7, 8, getBit(bits, 8));
for (let i = 9; i < 15; i++)
this.setFunctionModule(14 - i, 8, getBit(bits, i));
for (let i = 0; i < 8; i++)
this.setFunctionModule(this.size - 1 - i, 8, getBit(bits, i));
for (let i = 8; i < 15; i++)
this.setFunctionModule(8, this.size - 15 + i, getBit(bits, i));
this.setFunctionModule(8, this.size - 8, true);
}
drawVersion() {
if (this.version < 7)
return;
let rem = this.version;
for (let i = 0; i < 12; i++)
rem = rem << 1 ^ (rem >>> 11) * 7973;
const bits = this.version << 12 | rem;
assert(bits >>> 18 == 0);
for (let i = 0; i < 18; i++) {
const color = getBit(bits, i);
const a = this.size - 11 + i % 3;
const b = Math.floor(i / 3);
this.setFunctionModule(a, b, color);
this.setFunctionModule(b, a, color);
}
}
drawFinderPattern(x, y) {
for (let dy = -4; dy <= 4; dy++) {
for (let dx = -4; dx <= 4; dx++) {
const dist = Math.max(Math.abs(dx), Math.abs(dy));
const xx = x + dx;
const yy = y + dy;
if (0 <= xx && xx < this.size && 0 <= yy && yy < this.size)
this.setFunctionModule(xx, yy, dist != 2 && dist != 4);
}
}
}
drawAlignmentPattern(x, y) {
for (let dy = -2; dy <= 2; dy++) {
for (let dx = -2; dx <= 2; dx++)
this.setFunctionModule(x + dx, y + dy, Math.max(Math.abs(dx), Math.abs(dy)) != 1);
}
}
setFunctionModule(x, y, isDark) {
this.modules[y][x] = isDark;
this.isFunction[y][x] = true;
}
addEccAndInterleave(data) {
const ver = this.version;
const ecl = this.errorCorrectionLevel;
if (data.length != _QrCode.getNumDataCodewords(ver, ecl))
throw "Invalid argument";
const numBlocks = _QrCode.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver];
const blockEccLen = _QrCode.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver];
const rawCodewords = Math.floor(_QrCode.getNumRawDataModules(ver) / 8);
const numShortBlocks = numBlocks - rawCodewords % numBlocks;
const shortBlockLen = Math.floor(rawCodewords / numBlocks);
let blocks = [];
const rsDiv = _QrCode.reedSolomonComputeDivisor(blockEccLen);
for (let i = 0, k = 0; i < numBlocks; i++) {
let dat = data.slice(k, k + shortBlockLen - blockEccLen + (i < numShortBlocks ? 0 : 1));
k += dat.length;
const ecc = _QrCode.reedSolomonComputeRemainder(dat, rsDiv);
if (i < numShortBlocks)
dat.push(0);
blocks.push(dat.concat(ecc));
}
let result = [];
for (let i = 0; i < blocks[0].length; i++) {
blocks.forEach((block, j) => {
if (i != shortBlockLen - blockEccLen || j >= numShortBlocks)
result.push(block[i]);
});
}
assert(result.length == rawCodewords);
return result;
}
drawCodewords(data) {
if (data.length != Math.floor(_QrCode.getNumRawDataModules(this.version) / 8))
throw "Invalid argument";
let i = 0;
for (let right = this.size - 1; right >= 1; right -= 2) {
if (right == 6)
right = 5;
for (let vert = 0; vert < this.size; vert++) {
for (let j = 0; j < 2; j++) {
const x = right - j;
const upward = (right + 1 & 2) == 0;
const y = upward ? this.size - 1 - vert : vert;
if (!this.isFunction[y][x] && i < data.length * 8) {
this.modules[y][x] = getBit(data[i >>> 3], 7 - (i & 7));
i++;
}
}
}
}
assert(i == data.length * 8);
}
applyMask(mask) {
if (mask < 0 || mask > 7)
throw "Mask value out of range";
for (let y = 0; y < this.size; y++) {
for (let x = 0; x < this.size; x++) {
let invert;
switch (mask) {
case 0:
invert = (x + y) % 2 == 0;
break;
case 1:
invert = y % 2 == 0;
break;
case 2:
invert = x % 3 == 0;
break;
case 3:
invert = (x + y) % 3 == 0;
break;
case 4:
invert = (Math.floor(x / 3) + Math.floor(y / 2)) % 2 == 0;
break;
case 5:
invert = x * y % 2 + x * y % 3 == 0;
break;
case 6:
invert = (x * y % 2 + x * y % 3) % 2 == 0;
break;
case 7:
invert = ((x + y) % 2 + x * y % 3) % 2 == 0;
break;
default:
throw "Unreachable";
}
if (!this.isFunction[y][x] && invert)
this.modules[y][x] = !this.modules[y][x];
}
}
}
getPenaltyScore() {
let result = 0;
for (let y = 0; y < this.size; y++) {
let runColor = false;
let runX = 0;
let runHistory = [0, 0, 0, 0, 0, 0, 0];
for (let x = 0; x < this.size; x++) {
if (this.modules[y][x] == runColor) {
runX++;
if (runX == 5)
result += _QrCode.PENALTY_N1;
else if (runX > 5)
result++;
} else {
this.finderPenaltyAddHistory(runX, runHistory);
if (!runColor)
result += this.finderPenaltyCountPatterns(runHistory) * _QrCode.PENALTY_N3;
runColor = this.modules[y][x];
runX = 1;
}
}
result += this.finderPenaltyTerminateAndCount(runColor, runX, runHistory) * _QrCode.PENALTY_N3;
}
for (let x = 0; x < this.size; x++) {
let runColor = false;
let runY = 0;
let runHistory = [0, 0, 0, 0, 0, 0, 0];
for (let y = 0; y < this.size; y++) {
if (this.modules[y][x] == runColor) {
runY++;
if (runY == 5)
result += _QrCode.PENALTY_N1;
else if (runY > 5)
result++;
} else {
this.finderPenaltyAddHistory(runY, runHistory);
if (!runColor)
result += this.finderPenaltyCountPatterns(runHistory) * _QrCode.PENALTY_N3;
runColor = this.modules[y][x];
runY = 1;
}
}
result += this.finderPenaltyTerminateAndCount(runColor, runY, runHistory) * _QrCode.PENALTY_N3;
}
for (let y = 0; y < this.size - 1; y++) {
for (let x = 0; x < this.size - 1; x++) {
const color = this.modules[y][x];
if (color == this.modules[y][x + 1] && color == this.modules[y + 1][x] && color == this.modules[y + 1][x + 1])
result += _QrCode.PENALTY_N2;
}
}
let dark = 0;
for (const row of this.modules)
dark = row.reduce((sum, color) => sum + (color ? 1 : 0), dark);
const total = this.size * this.size;
const k = Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1;
assert(0 <= k && k <= 9);
result += k * _QrCode.PENALTY_N4;
assert(0 <= result && result <= 2568888);
return result;
}
getAlignmentPatternPositions() {
if (this.version == 1)
return [];
else {
const numAlign = Math.floor(this.version / 7) + 2;
const step = this.version == 32 ? 26 : Math.ceil((this.version * 4 + 4) / (numAlign * 2 - 2)) * 2;
let result = [6];
for (let pos = this.size - 7; result.length < numAlign; pos -= step)
result.splice(1, 0, pos);
return result;
}
}
static getNumRawDataModules(ver) {
if (ver < _QrCode.MIN_VERSION || ver > _QrCode.MAX_VERSION)
throw "Version number out of range";
let result = (16 * ver + 128) * ver + 64;
if (ver >= 2) {
const numAlign = Math.floor(ver / 7) + 2;
result -= (25 * numAlign - 10) * numAlign - 55;
if (ver >= 7)
result -= 36;
}
assert(208 <= result && result <= 29648);
return result;
}
static getNumDataCodewords(ver, ecl) {
return Math.floor(_QrCode.getNumRawDataModules(ver) / 8) - _QrCode.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver] * _QrCode.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver];
}
static reedSolomonComputeDivisor(degree) {
if (degree < 1 || degree > 255)
throw "Degree out of range";
let result = [];
for (let i = 0; i < degree - 1; i++)
result.push(0);
result.push(1);
let root = 1;
for (let i = 0; i < degree; i++) {
for (let j = 0; j < result.length; j++) {
result[j] = _QrCode.reedSolomonMultiply(result[j], root);
if (j + 1 < result.length)
result[j] ^= result[j + 1];
}
root = _QrCode.reedSolomonMultiply(root, 2);
}
return result;
}
static reedSolomonComputeRemainder(data, divisor) {
let result = divisor.map((_) => 0);
for (const b of data) {
const factor = b ^ result.shift();
result.push(0);
divisor.forEach((coef, i) => result[i] ^= _QrCode.reedSolomonMultiply(coef, factor));
}
return result;
}
static reedSolomonMultiply(x, y) {
if (x >>> 8 != 0 || y >>> 8 != 0)
throw "Byte out of range";
let z = 0;
for (let i = 7; i >= 0; i--) {
z = z << 1 ^ (z >>> 7) * 285;
z ^= (y >>> i & 1) * x;
}
assert(z >>> 8 == 0);
return z;
}
finderPenaltyCountPatterns(runHistory) {
const n = runHistory[1];
assert(n <= this.size * 3);
const core = n > 0 && runHistory[2] == n && runHistory[3] == n * 3 && runHistory[4] == n && runHistory[5] == n;
return (core && runHistory[0] >= n * 4 && runHistory[6] >= n ? 1 : 0) + (core && runHistory[6] >= n * 4 && runHistory[0] >= n ? 1 : 0);
}
finderPenaltyTerminateAndCount(currentRunColor, currentRunLength, runHistory) {
if (currentRunColor) {
this.finderPenaltyAddHistory(currentRunLength, runHistory);
currentRunLength = 0;
}
currentRunLength += this.size;
this.finderPenaltyAddHistory(currentRunLength, runHistory);
return this.finderPenaltyCountPatterns(runHistory);
}
finderPenaltyAddHistory(currentRunLength, runHistory) {
if (runHistory[0] == 0)
currentRunLength += this.size;
runHistory.pop();
runHistory.unshift(currentRunLength);
}
};
let QrCode = _QrCode;
QrCode.MIN_VERSION = 1;
QrCode.MAX_VERSION = 40;
QrCode.PENALTY_N1 = 3;
QrCode.PENALTY_N2 = 3;
QrCode.PENALTY_N3 = 40;
QrCode.PENALTY_N4 = 10;
QrCode.ECC_CODEWORDS_PER_BLOCK = [
[-1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
[-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28],
[-1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
[-1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30]
];
QrCode.NUM_ERROR_CORRECTION_BLOCKS = [
[-1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 24, 25],
[-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47, 49],
[-1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43, 45, 48, 51, 53, 56, 59, 62, 65, 68],
[-1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48, 51, 54, 57, 60, 63, 66, 70, 74, 77, 81]
];
qrcodegen2.QrCode = QrCode;
function appendBits(val, len, bb) {
if (len < 0 || len > 31 || val >>> len != 0)
throw "Value out of range";
for (let i = len - 1; i >= 0; i--)
bb.push(val >>> i & 1);
}
function getBit(x, i) {
return (x >>> i & 1) != 0;
}
function assert(cond) {
if (!cond)
throw "Assertion error";
}
const _QrSegment = class {
constructor(mode, numChars, bitData) {
this.mode = mode;
this.numChars = numChars;
this.bitData = bitData;
if (numChars < 0)
throw "Invalid argument";
this.bitData = bitData.slice();
}
static makeBytes(data) {
let bb = [];
for (const b of data)
appendBits(b, 8, bb);
return new _QrSegment(_QrSegment.Mode.BYTE, data.length, bb);
}
static makeNumeric(digits) {
if (!_QrSegment.isNumeric(digits))
throw "String contains non-numeric characters";
let bb = [];
for (let i = 0; i < digits.length; ) {
const n = Math.min(digits.length - i, 3);
appendBits(parseInt(digits.substr(i, n), 10), n * 3 + 1, bb);
i += n;
}
return new _QrSegment(_QrSegment.Mode.NUMERIC, digits.length, bb);
}
static makeAlphanumeric(text) {
if (!_QrSegment.isAlphanumeric(text))
throw "String contains unencodable characters in alphanumeric mode";
let bb = [];
let i;
for (i = 0; i + 2 <= text.length; i += 2) {
let temp = _QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i)) * 45;
temp += _QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i + 1));
appendBits(temp, 11, bb);
}
if (i < text.length)
appendBits(_QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i)), 6, bb);
return new _QrSegment(_QrSegment.Mode.ALPHANUMERIC, text.length, bb);
}
static makeSegments(text) {
if (text == "")
return [];
else if (_QrSegment.isNumeric(text))
return [_QrSegment.makeNumeric(text)];
else if (_QrSegment.isAlphanumeric(text))
return [_QrSegment.makeAlphanumeric(text)];
else
return [_QrSegment.makeBytes(_QrSegment.toUtf8ByteArray(text))];
}
static makeEci(assignVal) {
let bb = [];
if (assignVal < 0)
throw "ECI assignment value out of range";
else if (assignVal < 1 << 7)
appendBits(assignVal, 8, bb);
else if (assignVal < 1 << 14) {
appendBits(2, 2, bb);
appendBits(assignVal, 14, bb);
} else if (assignVal < 1e6) {
appendBits(6, 3, bb);
appendBits(assignVal, 21, bb);
} else
throw "ECI assignment value out of range";
return new _QrSegment(_QrSegment.Mode.ECI, 0, bb);
}
static isNumeric(text) {
return _QrSegment.NUMERIC_REGEX.test(text);
}
static isAlphanumeric(text) {
return _QrSegment.ALPHANUMERIC_REGEX.test(text);
}
getData() {
return this.bitData.slice();
}
static getTotalBits(segs, version) {
let result = 0;
for (const seg of segs) {
const ccbits = seg.mode.numCharCountBits(version);
if (seg.numChars >= 1 << ccbits)
return Infinity;
result += 4 + ccbits + seg.bitData.length;
}
return result;
}
static toUtf8ByteArray(str) {
str = encodeURI(str);
let result = [];
for (let i = 0; i < str.length; i++) {
if (str.charAt(i) != "%")
result.push(str.charCodeAt(i));
else {
result.push(parseInt(str.substr(i + 1, 2), 16));
i += 2;
}
}
return result;
}
};
let QrSegment = _QrSegment;
QrSegment.NUMERIC_REGEX = /^[0-9]*$/;
QrSegment.ALPHANUMERIC_REGEX = /^[A-Z0-9 $%*+.\/:-]*$/;
QrSegment.ALPHANUMERIC_CHARSET = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:";
qrcodegen2.QrSegment = QrSegment;
})(qrcodegen || (qrcodegen = {}));
((qrcodegen2) => {
let QrCode;
((QrCode2) => {
const _Ecc = class {
constructor(ordinal, formatBits) {
this.ordinal = ordinal;
this.formatBits = formatBits;
}
};
let Ecc = _Ecc;
Ecc.LOW = new _Ecc(0, 1);
Ecc.MEDIUM = new _Ecc(1, 0);
Ecc.QUARTILE = new _Ecc(2, 3);
Ecc.HIGH = new _Ecc(3, 2);
QrCode2.Ecc = Ecc;
})(QrCode = qrcodegen2.QrCode || (qrcodegen2.QrCode = {}));
})(qrcodegen || (qrcodegen = {}));
((qrcodegen2) => {
let QrSegment;
((QrSegment2) => {
const _Mode = class {
constructor(modeBits, numBitsCharCount) {
this.modeBits = modeBits;
this.numBitsCharCount = numBitsCharCount;
}
numCharCountBits(ver) {
return this.numBitsCharCount[Math.floor((ver + 7) / 17)];
}
};
let Mode = _Mode;
Mode.NUMERIC = new _Mode(1, [10, 12, 14]);
Mode.ALPHANUMERIC = new _Mode(2, [9, 11, 13]);
Mode.BYTE = new _Mode(4, [8, 16, 16]);
Mode.KANJI = new _Mode(8, [8, 10, 12]);
Mode.ECI = new _Mode(7, [0, 0, 0]);
QrSegment2.Mode = Mode;
})(QrSegment = qrcodegen2.QrSegment || (qrcodegen2.QrSegment = {}));
})(qrcodegen || (qrcodegen = {}));
var qrcodegen_default = qrcodegen;
return out;
}
// src/index.tsx
/**
* @license qrcode.react
* Copyright (c) Paul O'Shannessy
* SPDX-License-Identifier: ISC
*/
var ERROR_LEVEL_MAP = {
L: qrcodegen_default.QrCode.Ecc.LOW,
M: qrcodegen_default.QrCode.Ecc.MEDIUM,
Q: qrcodegen_default.QrCode.Ecc.QUARTILE,
H: qrcodegen_default.QrCode.Ecc.HIGH
};
var DEFAULT_PROPS = {
size: 128,
level: 'L',
bgColor: '#FFFFFF',
fgColor: '#000000',
level: "L",
bgColor: "#FFFFFF",
fgColor: "#000000",
includeMargin: false
};
var PROP_TYPES = process.env.NODE_ENV !== 'production' ? {
value: PropTypes.string.isRequired,
size: PropTypes.number,
level: PropTypes.oneOf(['L', 'M', 'Q', 'H']),
bgColor: PropTypes.string,
fgColor: PropTypes.string,
includeMargin: PropTypes.bool,
imageSettings: PropTypes.shape({
src: PropTypes.string.isRequired,
height: PropTypes.number.isRequired,
width: PropTypes.number.isRequired,
excavate: PropTypes.bool,
x: PropTypes.number,
y: PropTypes.number
})
} : {};
var MARGIN_SIZE = 4; // This is *very* rough estimate of max amount of QRCode allowed to be covered.
// It is "wrong" in a lot of ways (area is a terrible way to estimate, it
// really should be number of modules covered), but if for some reason we don't
// get an explicit height or width, I'd rather default to something than throw.
var MARGIN_SIZE = 4;
var DEFAULT_IMG_SCALE = 0.1;
function generatePath(modules) {
var margin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var ops = [];
modules.forEach(function (row, y) {
var start = null;
row.forEach(function (cell, x) {
function generatePath(modules, margin = 0) {
const ops = [];
modules.forEach(function(row, y) {
let start = null;
row.forEach(function(cell, x) {
if (!cell && start !== null) {
// M0 0h7v1H0z injects the space with the move and drops the comma,
// saving a char per operation
ops.push("M".concat(start + margin, " ").concat(y + margin, "h").concat(x - start, "v1H").concat(start + margin, "z"));
ops.push(`M${start + margin} ${y + margin}h${x - start}v1H${start + margin}z`);
start = null;
return;
} // end of row, clean up or skip
}
if (x === row.length - 1) {
if (!cell) {
// We would have closed the op above already so this can only mean
// 2+ light modules in a row.
return;
}
if (start === null) {
// Just a single dark module.
ops.push("M".concat(x + margin, ",").concat(y + margin, " h1v1H").concat(x + margin, "z"));
ops.push(`M${x + margin},${y + margin} h1v1H${x + margin}z`);
} else {
// Otherwise finish the current line.
ops.push("M".concat(start + margin, ",").concat(y + margin, " h").concat(x + 1 - start, "v1H").concat(start + margin, "z"));
ops.push(`M${start + margin},${y + margin} h${x + 1 - start}v1H${start + margin}z`);
}
return;
}
if (cell && start === null) {

@@ -155,18 +700,13 @@ start = x;

});
return ops.join('');
} // We could just do this in generatePath, except that we want to support
// non-Path2D canvas, so we need to keep it an explicit step.
return ops.join("");
}
function excavateModules(modules, excavation) {
return modules.slice().map(function (row, y) {
return modules.slice().map((row, y) => {
if (y < excavation.y || y >= excavation.y + excavation.h) {
return row;
}
return row.map(function (cell, x) {
return row.map((cell, x) => {
if (x < excavation.x || x >= excavation.x + excavation.w) {
return cell;
}
return false;

@@ -176,50 +716,26 @@ });

}
function getImageSettings(props, cells) {
var imageSettings = props.imageSettings,
size = props.size,
includeMargin = props.includeMargin;
const { imageSettings, size, includeMargin } = props;
if (imageSettings == null) {
return null;
}
var margin = includeMargin ? MARGIN_SIZE : 0;
var numCells = cells.length + margin * 2;
var defaultSize = Math.floor(size * DEFAULT_IMG_SCALE);
var scale = numCells / size;
var w = (imageSettings.width || defaultSize) * scale;
var h = (imageSettings.height || defaultSize) * scale;
var x = imageSettings.x == null ? cells.length / 2 - w / 2 : imageSettings.x * scale;
var y = imageSettings.y == null ? cells.length / 2 - h / 2 : imageSettings.y * scale;
var excavation = null;
const margin = includeMargin ? MARGIN_SIZE : 0;
const numCells = cells.length + margin * 2;
const defaultSize = Math.floor(size * DEFAULT_IMG_SCALE);
const scale = numCells / size;
const w = (imageSettings.width || defaultSize) * scale;
const h = (imageSettings.height || defaultSize) * scale;
const x = imageSettings.x == null ? cells.length / 2 - w / 2 : imageSettings.x * scale;
const y = imageSettings.y == null ? cells.length / 2 - h / 2 : imageSettings.y * scale;
let excavation = null;
if (imageSettings.excavate) {
var floorX = Math.floor(x);
var floorY = Math.floor(y);
var ceilW = Math.ceil(w + x - floorX);
var ceilH = Math.ceil(h + y - floorY);
excavation = {
x: floorX,
y: floorY,
w: ceilW,
h: ceilH
};
let floorX = Math.floor(x);
let floorY = Math.floor(y);
let ceilW = Math.ceil(w + x - floorX);
let ceilH = Math.ceil(h + y - floorY);
excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
}
return {
x: x,
y: y,
h: h,
w: w,
excavation: excavation
};
} // For canvas we're going to switch our drawing mode based on whether or not
// the environment supports Path2D. We only need the constructor to be
// supported, but Edge doesn't actually support the path (string) type
// argument. Luckily it also doesn't support the addPath() method. We can
// treat that as the same thing.
var SUPPORTS_PATH2D = function () {
return { x, y, h, w, excavation };
}
var SUPPORTS_PATH2D = function() {
try {

@@ -230,291 +746,149 @@ new Path2D().addPath(new Path2D());

}
return true;
}();
var QRCodeCanvas = /*#__PURE__*/function (_React$PureComponent) {
_inherits(QRCodeCanvas, _React$PureComponent);
var _super = _createSuper(QRCodeCanvas);
function QRCodeCanvas() {
var _this;
_classCallCheck(this, QRCodeCanvas);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "_canvas", void 0);
_defineProperty(_assertThisInitialized(_this), "_image", void 0);
_defineProperty(_assertThisInitialized(_this), "state", {
imgLoaded: false
});
_defineProperty(_assertThisInitialized(_this), "handleImageLoad", function () {
_this.setState({
imgLoaded: true
});
});
return _this;
}
_createClass(QRCodeCanvas, [{
key: "componentDidMount",
value: function componentDidMount() {
if (this._image && this._image.complete) {
this.handleImageLoad();
function QRCodeCanvas(props) {
const _canvas = (0, import_react.useRef)(null);
const _image = (0, import_react.useRef)(null);
function update() {
const { value: value2, size: size2, level: level2, bgColor: bgColor2, fgColor: fgColor2, includeMargin: includeMargin2 } = props;
if (_canvas.current != null) {
const canvas = _canvas.current;
const ctx = canvas.getContext("2d");
if (!ctx) {
return;
}
this.update();
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
var _this$props$imageSett, _nextProps$imageSetti;
var currentSrc = (_this$props$imageSett = this.props.imageSettings) === null || _this$props$imageSett === void 0 ? void 0 : _this$props$imageSett.src;
var nextSrc = (_nextProps$imageSetti = nextProps.imageSettings) === null || _nextProps$imageSetti === void 0 ? void 0 : _nextProps$imageSetti.src;
if (currentSrc !== nextSrc) {
this.setState({
imgLoaded: false
});
let cells = qrcodegen_default.QrCode.encodeText(value2, ERROR_LEVEL_MAP[level2]).getModules();
const margin = includeMargin2 ? MARGIN_SIZE : 0;
const numCells = cells.length + margin * 2;
const calculatedImageSettings = getImageSettings(props, cells);
const image = _image.current;
const haveImageToRender = calculatedImageSettings != null && image !== null && image.complete && image.naturalHeight !== 0 && image.naturalWidth !== 0;
if (haveImageToRender) {
if (calculatedImageSettings.excavation != null) {
cells = excavateModules(cells, calculatedImageSettings.excavation);
}
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
this.update();
}
}, {
key: "update",
value: function update() {
var _this$props = this.props,
value = _this$props.value,
size = _this$props.size,
level = _this$props.level,
bgColor = _this$props.bgColor,
fgColor = _this$props.fgColor,
includeMargin = _this$props.includeMargin,
imageSettings = _this$props.imageSettings; // We'll use type===-1 to force QRCode to automatically pick the best type
var qrcode = new QRCodeImpl(-1, ErrorCorrectLevel[level]);
qrcode.addData(convertStr(value));
qrcode.make();
if (this._canvas != null) {
var canvas = this._canvas;
var ctx = canvas.getContext('2d');
if (!ctx) {
return;
}
var cells = qrcode.modules;
if (cells === null) {
return;
}
var margin = includeMargin ? MARGIN_SIZE : 0;
var numCells = cells.length + margin * 2;
var calculatedImageSettings = getImageSettings(this.props, cells);
if (imageSettings != null && calculatedImageSettings != null) {
if (calculatedImageSettings.excavation != null) {
cells = excavateModules(cells, calculatedImageSettings.excavation);
}
} // We're going to scale this so that the number of drawable units
// matches the number of cells. This avoids rounding issues, but does
// result in some potentially unwanted single pixel issues between
// blocks, only in environments that don't support Path2D.
var pixelRatio = window.devicePixelRatio || 1;
canvas.height = canvas.width = size * pixelRatio;
var scale = size / numCells * pixelRatio;
ctx.scale(scale, scale); // Draw solid background, only paint dark modules.
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, numCells, numCells);
ctx.fillStyle = fgColor;
if (SUPPORTS_PATH2D) {
// $FlowFixMe: Path2D c'tor doesn't support args yet.
ctx.fill(new Path2D(generatePath(cells, margin)));
} else {
cells.forEach(function (row, rdx) {
row.forEach(function (cell, cdx) {
if (cell) {
ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
}
});
const pixelRatio = window.devicePixelRatio || 1;
canvas.height = canvas.width = size2 * pixelRatio;
const scale = size2 / numCells * pixelRatio;
ctx.scale(scale, scale);
ctx.fillStyle = bgColor2;
ctx.fillRect(0, 0, numCells, numCells);
ctx.fillStyle = fgColor2;
if (SUPPORTS_PATH2D) {
ctx.fill(new Path2D(generatePath(cells, margin)));
} else {
cells.forEach(function(row, rdx) {
row.forEach(function(cell, cdx) {
if (cell) {
ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
}
});
}
if (this.state.imgLoaded && this._image && calculatedImageSettings != null) {
ctx.drawImage(this._image, calculatedImageSettings.x + margin, calculatedImageSettings.y + margin, calculatedImageSettings.w, calculatedImageSettings.h);
}
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props2 = this.props,
value = _this$props2.value,
size = _this$props2.size,
level = _this$props2.level,
bgColor = _this$props2.bgColor,
fgColor = _this$props2.fgColor,
style = _this$props2.style,
includeMargin = _this$props2.includeMargin,
imageSettings = _this$props2.imageSettings,
otherProps = _objectWithoutProperties(_this$props2, _excluded);
var canvasStyle = _objectSpread({
height: size,
width: size
}, style);
var img = null;
var imgSrc = imageSettings && imageSettings.src;
if (imageSettings != null && imgSrc != null) {
img = /*#__PURE__*/React.createElement("img", {
src: imgSrc,
style: {
display: 'none'
},
onLoad: this.handleImageLoad,
ref: function ref(_ref) {
return _this2._image = _ref;
}
});
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", _extends({
style: canvasStyle,
height: size,
width: size,
ref: function ref(_ref2) {
return _this2._canvas = _ref2;
}
}, otherProps)), img);
if (haveImageToRender) {
ctx.drawImage(image, calculatedImageSettings.x + margin, calculatedImageSettings.y + margin, calculatedImageSettings.w, calculatedImageSettings.h);
}
}
}]);
return QRCodeCanvas;
}(React.PureComponent);
_defineProperty(QRCodeCanvas, "defaultProps", DEFAULT_PROPS);
if (process.env.NODE_ENV !== 'production') {
QRCodeCanvas.propTypes = PROP_TYPES;
}
(0, import_react.useEffect)(() => {
update();
});
const _a = props, {
value,
size,
level,
bgColor,
fgColor,
style,
includeMargin,
imageSettings
} = _a, otherProps = __objRest(_a, [
"value",
"size",
"level",
"bgColor",
"fgColor",
"style",
"includeMargin",
"imageSettings"
]);
const canvasStyle = __spreadValues({ height: size, width: size }, style);
let img = null;
let imgSrc = imageSettings == null ? void 0 : imageSettings.src;
if (imgSrc != null) {
img = /* @__PURE__ */ import_react.default.createElement("img", {
src: imgSrc,
key: imgSrc,
style: { display: "none" },
onLoad: () => {
update();
},
ref: _image
});
}
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("canvas", __spreadValues({
style: canvasStyle,
height: size,
width: size,
ref: _canvas
}, otherProps)), img);
}
var QRCodeSVG = /*#__PURE__*/function (_React$PureComponent2) {
_inherits(QRCodeSVG, _React$PureComponent2);
var _super2 = _createSuper(QRCodeSVG);
function QRCodeSVG() {
_classCallCheck(this, QRCodeSVG);
return _super2.apply(this, arguments);
QRCodeCanvas.defaultProps = DEFAULT_PROPS;
function QRCodeSVG(props) {
const _a = props, {
value,
size,
level,
bgColor,
fgColor,
includeMargin,
imageSettings
} = _a, otherProps = __objRest(_a, [
"value",
"size",
"level",
"bgColor",
"fgColor",
"includeMargin",
"imageSettings"
]);
let cells = qrcodegen_default.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
const margin = includeMargin ? MARGIN_SIZE : 0;
const numCells = cells.length + margin * 2;
const calculatedImageSettings = getImageSettings(props, cells);
let image = null;
if (imageSettings != null && calculatedImageSettings != null) {
if (calculatedImageSettings.excavation != null) {
cells = excavateModules(cells, calculatedImageSettings.excavation);
}
image = /* @__PURE__ */ import_react.default.createElement("image", {
xlinkHref: imageSettings.src,
height: calculatedImageSettings.h,
width: calculatedImageSettings.w,
x: calculatedImageSettings.x + margin,
y: calculatedImageSettings.y + margin,
preserveAspectRatio: "none"
});
}
_createClass(QRCodeSVG, [{
key: "render",
value: function render() {
var _this$props3 = this.props,
value = _this$props3.value,
size = _this$props3.size,
level = _this$props3.level,
bgColor = _this$props3.bgColor,
fgColor = _this$props3.fgColor,
includeMargin = _this$props3.includeMargin,
imageSettings = _this$props3.imageSettings,
otherProps = _objectWithoutProperties(_this$props3, _excluded2); // We'll use type===-1 to force QRCode to automatically pick the best type
var qrcode = new QRCodeImpl(-1, ErrorCorrectLevel[level]);
qrcode.addData(convertStr(value));
qrcode.make();
var cells = qrcode.modules;
if (cells === null) {
return null;
}
var margin = includeMargin ? MARGIN_SIZE : 0;
var numCells = cells.length + margin * 2;
var calculatedImageSettings = getImageSettings(this.props, cells);
var image = null;
if (imageSettings != null && calculatedImageSettings != null) {
if (calculatedImageSettings.excavation != null) {
cells = excavateModules(cells, calculatedImageSettings.excavation);
}
image = /*#__PURE__*/React.createElement("image", {
xlinkHref: imageSettings.src,
height: calculatedImageSettings.h,
width: calculatedImageSettings.w,
x: calculatedImageSettings.x + margin,
y: calculatedImageSettings.y + margin,
preserveAspectRatio: "none"
});
} // Drawing strategy: instead of a rect per module, we're going to create a
// single path for the dark modules and layer that on top of a light rect,
// for a total of 2 DOM nodes. We pay a bit more in string concat but that's
// way faster than DOM ops.
// For level 1, 441 nodes -> 2
// For level 40, 31329 -> 2
var fgPath = generatePath(cells, margin);
return /*#__PURE__*/React.createElement("svg", _extends({
shapeRendering: "crispEdges",
height: size,
width: size,
viewBox: "0 0 ".concat(numCells, " ").concat(numCells)
}, otherProps), /*#__PURE__*/React.createElement("path", {
fill: bgColor,
d: "M0,0 h".concat(numCells, "v").concat(numCells, "H0z")
}), /*#__PURE__*/React.createElement("path", {
fill: fgColor,
d: fgPath
}), image);
}
}]);
return QRCodeSVG;
}(React.PureComponent);
_defineProperty(QRCodeSVG, "defaultProps", DEFAULT_PROPS);
if (process.env.NODE_ENV !== 'production') {
QRCodeSVG.propTypes = PROP_TYPES;
const fgPath = generatePath(cells, margin);
return /* @__PURE__ */ import_react.default.createElement("svg", __spreadValues({
shapeRendering: "crispEdges",
height: size,
width: size,
viewBox: `0 0 ${numCells} ${numCells}`
}, otherProps), /* @__PURE__ */ import_react.default.createElement("path", {
fill: bgColor,
d: `M0,0 h${numCells}v${numCells}H0z`
}), /* @__PURE__ */ import_react.default.createElement("path", {
fill: fgColor,
d: fgPath
}), image);
}
var QRCode = function QRCode(props) {
var renderAs = props.renderAs,
otherProps = _objectWithoutProperties(props, _excluded3);
var Component = renderAs === 'svg' ? QRCodeSVG : QRCodeCanvas;
return /*#__PURE__*/React.createElement(Component, otherProps);
QRCodeSVG.defaultProps = DEFAULT_PROPS;
var QRCode = (props) => {
const _a = props, { renderAs } = _a, otherProps = __objRest(_a, ["renderAs"]);
const Component = renderAs === "svg" ? QRCodeSVG : QRCodeCanvas;
return /* @__PURE__ */ import_react.default.createElement(Component, __spreadValues({}, otherProps));
};
QRCode.defaultProps = _objectSpread({
renderAs: 'canvas'
}, DEFAULT_PROPS);
module.exports = QRCode;
QRCode.defaultProps = __spreadValues({ renderAs: "canvas" }, DEFAULT_PROPS);
{
"name": "qrcode.react",
"version": "2.0.0",
"version": "3.0.0",
"description": "React component to generate QR codes",

@@ -11,12 +11,16 @@ "keywords": [

"homepage": "http://zpao.github.io/qrcode.react",
"main": "lib/index.js",
"main": "./lib/index.js",
"module": "./lib/esm/index.js",
"types": "./lib/index.d.ts",
"scripts": {
"flow": "flow",
"build": "yarn run build:code && yarn run build:examples",
"build:code": "tsup src/index.tsx -d lib --format esm,cjs --dts --legacy-output --target=es2017 --platform=browser",
"build:examples": "tsup examples/demo.tsx -d examples --format iife --env.NODE_ENV production --minify --target=es2017 --legacy-output",
"lint": "eslint .",
"pretty": "prettier --write '{*,.*}.{js,json}' '**/*.{js,json}'",
"prepublishOnly": "flow && make clean && make all",
"pretty": "prettier --write '{*,.*}.{mjs,js,json}' '**/*.{js,json}'",
"prepare": "tsc && make clean && make all",
"prepublish-docs": "make clean && make all",
"publish-docs": "gh-pages --dist=examples --src='{index.html,bundle.js}'",
"publish-docs": "gh-pages --dist=examples --src='{index.html,iife/demo.js}'",
"test": "jest",
"typecheck": "flow"
"typecheck": "tsc --noEmit"
},

@@ -32,48 +36,38 @@ "author": "Paul O’Shannessy <paul@oshannessy.com>",

],
"dependencies": {
"loose-envify": "^1.4.0",
"prop-types": "^15.6.0",
"qr.js": "0.0.0"
},
"dependencies": {},
"peerDependencies": {
"react": "^16.3.0 || ^17.0.0"
"react": "^16.8.0 || ^17.0.0"
},
"devDependencies": {
"@babel/cli": "^7.13.14",
"@babel/core": "^7.13.15",
"@babel/eslint-parser": "^7.16.5",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-proposal-object-rest-spread": "^7.13.8",
"@babel/plugin-proposal-optional-chaining": "^7.13.12",
"@babel/preset-env": "^7.13.15",
"@babel/preset-flow": "^7.13.13",
"@babel/preset-react": "^7.13.13",
"babel-loader": "^8.2.2",
"eslint": "^8.5.0",
"@babel/core": "^7.17.5",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@types/jest": "^27.4.0",
"@types/node": "^17.0.5",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@types/react-test-renderer": "^17.0.1",
"@typescript-eslint/eslint-plugin": "^5.8.1",
"@typescript-eslint/parser": "^5.8.1",
"babel-jest": "^27.5.1",
"eslint": "^8.6.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-jest": "^25.3.2",
"eslint-plugin-jest": "^26.1.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.23.2",
"flow-bin": "^0.111.3",
"gh-pages": "^3.2.3",
"jest": "^27.4.5",
"prettier": "^2.2.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-test-renderer": "^17.0.1",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
"tsup": "^5.11.13",
"typescript": "^4.5.4"
},
"browserify": {
"transform": [
"loose-envify"
]
},
"jest": {
"testPathIgnorePatterns": [
"/node_modules/",
"/lib/"
]
"transform": {
"\\.[jt]sx?$": "babel-jest"
}
}
}
# qrcode.react
A React component to generate [QR codes](http://en.wikipedia.org/wiki/QR_code).
A React component to generate [QR codes](http://en.wikipedia.org/wiki/QR_code) for rendering to the DOM.

@@ -13,35 +13,67 @@ ## Installation

`qrcode.react` exports three components, supporting rendering as SVG or Canvas. SVG is generally recommended as it is more flexible, but Canvas may be preferable.
All examples are shown using modern JavaScript modules and syntax. CommonJS `require('qrcode.react')` is also supported.
### `QRCodeSVG`
```js
var React = require('react');
var QRCode = require('qrcode.react');
import ReactDOM from 'react-dom';
import {QRCodeSVG} from 'qrcode.react';
React.render(
<QRCode value="http://facebook.github.io/react/" />,
mountNode
ReactDOM.render(
<QRCodeSVG value="https://reactjs.org/" />,
document.getElementById('mountNode')
);
```
### `QRCodeCanvas`
```js
import ReactDOM from 'react-dom';
import {QRCodeCanvas} from 'qrcode.react';
ReactDOM.render(
<QRCodeCanvas value="https://reactjs.org/" />,
document.getElementById('mountNode')
);
```
### `QRCode` - **DEPRECATED**
**Note:** Usage of this is deprecated as of v3. It is available as the `default` export for compatiblity with previous versions. The `renderAs` prop is only supported with this component.
```js
import ReactDOM from 'react-dom';
import QRCode from 'qrcode.react';
ReactDOM.render(
<QRCode value="https://reactjs.org/" renderAs="canvas" />,
document.getElementById('mountNode')
);
```
## Available Props
prop | type | default value
----------|----------------------|--------------
`value` | `string` |
`renderAs`| `string` (`'canvas' 'svg'`) | `'canvas'`
`size` | `number` | `128`
`bgColor` | `string` (CSS color) | `"#FFFFFF"`
`fgColor` | `string` (CSS color) | `"#000000"`
`level` | `string` (`'L' 'M' 'Q' 'H'`) | `'L'`
`includeMargin` | `boolean` | `false`
`imageSettings` | `object` (see below) |
| prop | type | default value |
| --------------- | ---------------------------- | ------------- |
| `value` | `string` |
| `renderAs` | `string` (`'canvas' 'svg'`) | `'canvas'` |
| `size` | `number` | `128` |
| `bgColor` | `string` (CSS color) | `"#FFFFFF"` |
| `fgColor` | `string` (CSS color) | `"#000000"` |
| `level` | `string` (`'L' 'M' 'Q' 'H'`) | `'L'` |
| `includeMargin` | `boolean` | `false` |
| `imageSettings` | `object` (see below) | |
### `imageSettings`
field | type | default value
-----------|----------------------|--------------
`src` | `string` |
`x` | `number` | none, will center
`y` | `number` | none, will center
`height` | `number` | 10% of `size`
`width` | `number` | 10% of `size`
`excavate` | `boolean` | `false`
| field | type | default value |
| ---------- | --------- | ----------------- |
| `src` | `string` |
| `x` | `number` | none, will center |
| `y` | `number` | none, will center |
| `height` | `number` | 10% of `size` |
| `width` | `number` | 10% of `size` |
| `excavate` | `boolean` | `false` |

@@ -52,7 +84,14 @@ ## Custom Styles

**Note:** In order to render QR Codes in `<canvas>` on high density displays, we scale the canvas element to contain an appropriate number of pixels and then use inline styles to scale back down. We will merge any additional styles, with custom `height` and `width` overriding our own values. This allows scaling to percentages *but* if scaling beyond the `size`, you will encounter blurry images. I recommend detecting resizes with something like [react-measure](https://github.com/souporserious/react-measure) to detect and pass the appropriate size when rendering to `<canvas>`.
**Note:** In order to render QR Codes in `<canvas>` on high density displays, we scale the canvas element to contain an appropriate number of pixels and then use inline styles to scale back down. We will merge any additional styles, with custom `height` and `width` overriding our own values. This allows scaling to percentages _but_ if scaling beyond the `size`, you will encounter blurry images. I recommend detecting resizes with something like [react-measure](https://github.com/souporserious/react-measure) to detect and pass the appropriate size when rendering to `<canvas>`.
<img src="qrcode.png" height="256" width="256">
## Encoding Mode
## LICENSE [ISC](LICENSE)
`qrcode.react` supports encoding text only, in a single segment. The encoding library being used does minimal detection to determine if the text being encoded can follow an optimized path for Numeric or Alphanumeric modes, allowing for more data to be encoded. Otherwise, it will encode following Byte mode. This mode includes supports multi-byte Unicode characters such as Kanji, however it does not support the optimized Kanji encoding mode.
## LICENSE
`qrcode.react` is licensed under the [ISC license](LICENSE).
`qrcode.react` bundles [QR Code Generator](https://www.nayuki.io/page/qr-code-generator-library), which is available under the [MIT license](src/third-party/qrcodegen/LICENSE).

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc