It appears that QRCodeCanvas uses a deprecated method.

    1: "Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.·
    * Move data fetching code or side effects to componentDidUpdate.
    * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
    * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.·
    Please update the following components: %s", "QRCodeCanvas"

Is this a known issue?

img (logo) issues:

• https://github.com/zpao/qrcode.react/issues/70
• https://github.com/zpao/qrcode.react/issues/50
• https://github.com/zpao/qrcode.react/issues/46

download issues:

• https://github.com/zpao/qrcode.react/issues/37
• https://github.com/zpao/qrcode.react/issues/30

I was thinking a bit more about #49 and how to publish this component as an ESM. The best way to guarantee compatibility between CommonJs and ESM right now is to only use named exports.

This PR is obviously a breaking but it not only adds the ability to eventually use ESM it also removes a level of indirection and helps editors discover the propTypes for the components. Once shipping with ESM it should also allow bundles to tree shake out the unused module.

WDYT?

When you integrate the QRCode component in your projects sometimes you need to add CSS classes in order to be possible apply custom CSS style properties like padding, margin, etc.

Actually, my current workaround to add custom classes into the QRCode component is using a wrapper div, something like:

// React code
<div className="qr-code-custom-class">
    <QRCode {...props} />
</div>

So, I think we could add as QRCode prop the className attribute in order to be possible add custom classNames into the QRCode canvas.

Demo:

Linter Results:

Also in this commit:

• Updated the README.md file in order to add the new prop in component documentation.
• Updated demo.js in order to be possible test the new component prop.

I've attached a sample QR code with the generator text: INWTUSRBM5RUO6JX. If I scan using Google Authenticator for iOs on iPhone X with iOs 13.1.3, I get the following code at some time: 879 257 If I scan the sam QR using Google Authenticator for Android, on a Huawei Mate 10 Pro, Android 9, at the same time I get the following code: 210 354 But if I create the authenticator on iOs using the text provided INWTUSRBM5RUO6JX, the authenticator will provide me with the same code (at that same time obviously) as the one from the Android authenticator, which is 210 354. Nevertheless, going forward, if I try to validate the 2fa code, the 210 354 is the right one.

Need help with this? I have users using iPhones that cannot enable 2fa. Thanks!

Let's say you have addresses

const addresses = [1, 2, 3]

And now if we Parent and we map the addresses to generate a list of QRs.

addresses.map(address => {
	return <AddressItem address={address} />
}

Inside the child <AddressItem />

We have something

const AddressItem = ({address}) => (
  <QRCode value={address} />
)

The QR would generate a QR from the last value (3 in this case)

Any propositions how we could solve this?

Is there a reason that width and height are "hardcoded" into style attribute? It's quite painful to try too get canvas responsive for different mobile screens. The only option is to use !important which is a bit hairy workaround.

canvas {
    height: auto !important;
    width: 100% !important;
    max-width: 300px;
 }

I get that rendering for retina (HiDPI) screens might be an issue to get a sharp image.

Error:

/node_modules/qrcode.react/lib/index.js:52 49 | function convertStr(str) { 50 | var out = ''; 51 |

52 | for (var i = 0; i < str.length; i++) { 53 | var charcode = str.charCodeAt(i); 54 | 55 | if (charcode < 0x0080) {

Solution:

function convertStr(str: string): string { let out = ''; if (str){ for (let i = 0; i < str.length; i++) { let 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)); } } } return out; }

everything works fine, but it would be nice to get rid of this annoying warning.

Warning: React does not recognize the 'includeMargin' prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseincludemargininstead. If you accidentally passed it from a parent component, remove it from the DOM element.

The docs says:

qrcode.react will pass through any additional props to the underlying DOM node (

But this is not supported in the props type for the canvas and SVG components:

https://github.com/zpao/qrcode.react/blob/main/src/index.tsx#L21-L38

This causes any additional props passed to be an error when running tsc.

A solution could probably be:

function QRCodeCanvas(props: QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>) {
// pick all QRProps to be used, and spread the rest

Hi there,

We're using the library in our product and it was pointed out to us that the SVG rendered does not pass W3C validation due to the SVG having shapeRendering attribute instead of shape-rendering. I've raised a PR #112 to address this but if you have any thoughts on this do let me know if we might have missed something.

Our code for the QR code generation is quite simple, just <QRCode renderAs="svg" size={size} level={level} value={url} />

Bumps json5 from 2.2.1 to 2.2.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

• Adds a check for a title attribute on <svg> that converts to a nested <title> tag for better screen reader compatibility.
• Adds test case for the above.

The NVDA screen reader for Windows does not detect the QR code SVG when moving through objects on the screen. When moving across elements it, NVDA skips the SVG entirely. See attached video for example (QR code in example is expired one time link).

https://user-images.githubusercontent.com/10451187/206581398-0944995f-cd11-4ae7-9faf-ef4bb6e01a1d.mov

Hello,

It would be great if rather than just true or false we could set a numerical value for excavate. I am running into the issue that occasionally even with excavate: true depending on the level and image size the excavate is being overridden particularly when include margin is true.

Possibly could even have an additional prop such as excavate: true excavate_amount: 1..10

i wanted to pass a VCard with an image64 based its not possible with this library? example 👍

BEGIN:VCARD VERSION:3.0 FN;CHARSET=UTF-8:Emmanuel Lohora N;CHARSET=UTF-8:Lohora;Emmanuel;;; EMAIL;CHARSET=UTF-8;type=WORK,INTERNET:[email protected] PHOTO;ENCODING=b;TYPE=image/jpg:/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDtv7M00RSBb1ScHgH2rwJJpU8bJG1zMYBdgEbzjGa+i5rALotw4t402uckDmvm2/SVfFkiwKxnM2Iwo/iJwP1pIwg3LpY9r1288P2tgVmvljlypCs2COetQaLLpM9zObbVEniMx+ZWB649K4PUPh3qryLNc6zHPMw3SkqSc/1rj9l94Q8QJMGbdFJndyFlUHkH1BFZqSbsmdEqE4xu0e/alBpsIEi3e35sEioEi0yW7tiLoklRnFU9RkiSKGaOPfG4Vtp962PEFta2upab9nVNskAOB9atJ2vc4vaPsdlq1pINHv3EnBJYLjivmGz3N8Q7cCRVkN2QpYZAPOP1xXtb+MdSutcTQpY0+z3EHmtJ3Ge1eE3Rks/iGhXlkvgR/wB9VbW5rSmnJM9MvzqzWq2895F9oldgJUGMgdM4HH4VzOu6MupTabp9xIxPmkM69fungfUgc1Vu5LP+0pXn1G7hvI9zu7vjYQcbNuevAHv1qWXxFFFqul6rLE4s4LhHwThpjkZx/sgcn1riUJKaR7E5w9m3ueo6nok+63tLeIyP5S4RBk8cf0rQ8TWC2+rWDy4RmgCge4p+m669rdPMsay7ujE9QRkY9q57U9buNa1y1e4+URybVXsBXelofPJprzO5/wCEMj+1Rz/asOqgAhBmvmvXrd4fiJexEB3t7tiW9QpzX0AddnZHPnP8vTmvB7iKaTxHql48TnMhwSDzk849adNOUrM6PdS91GvZzWOpXOq65rgtVRJUih3xjcWAPyqD7Y5NcZrGoTa5qDzFAkSHZEoHCL6e578VY/sqZ5nnliLBn3Kg3bVz/kZp81rLFkfZ5GVZBny84P0/xp+xjzObN1UfIoLYv+G/FWo+H3SPJubMHBtWJyB6qf4ePw9q9w0XQtE8T2FjrWm6g7QsdxBwGRx1Vh2Ir54ls7mT5Es5hJI2UY5GF54Pb8a6j4eahfafrX2LbcxWt1gkEHAkUdfxGR+VKfZGbpxfvNH/2Q== TEL;TYPE=CELL:+43 6648321470 TEL;TYPE=WORK,VOICE:+4355235021164 TITLE;CHARSET=UTF-8:Software Engineer ROLE;CHARSET=UTF-8:Digitalisation & Innovation ORG;CHARSET=UTF-8:Loacker Recycling GmbH URL;type=WORK;CHARSET=UTF-8:https://www.loacker.cc/ REV:2022-06-29T15:22:19.478Z END:VCARD