A QRCode component for use with React.

Last update: May 17, 2022

qrcode.react

A React component to generate QR codes.

Installation

npm install qrcode.react

Usage

var React = require('react');
var QRCode = require('qrcode.react');

React.render(
  <QRCode value="http://facebook.github.io/react/" />,
  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)

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

Custom Styles

qrcode.react will pass through any additional props to the underlying DOM node (<svg> or <canvas>). This allows the use of inline style or custom className to customize the rendering. One common use would be to support a responsive layout.

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 to detect and pass the appropriate size when rendering to <canvas>.

LICENSE ISC

GitHub

https://github.com/zpao/qrcode.react
Comments
  • 1. Warning: componentWillReceiveProps has been renamed

    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?

    Reviewed by julien51 at 2021-01-11 14:24
  • 2. add img (logo) and download api

    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
    Reviewed by pastleo at 2019-02-01 09:08
  • 3. Export QRCodeSVG and QRCodeCanvas directly.

    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?

    Reviewed by realityking at 2018-08-29 22:05
  • 4. Add a new className prop into component

    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:

    screen shot 2017-09-28 at 11 13 06

    Linter Results:

    screen shot 2017-09-28 at 10 59 43

    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.
    Reviewed by victorfern91 at 2017-09-28 10:27
  • 5. QR creates wrong authenticator on iPhone X

    SampleQR 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!

    Reviewed by dandamian83 at 2019-11-13 15:40
  • 6. QRCode only displays the last value when iterated

    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?

    Reviewed by indreklasn at 2018-02-02 19:31
  • 7. Hardcoded width and height

    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.

    Reviewed by jozan at 2016-02-13 07:47
  • 8. Cannot read properties of undefined (reading 'lenght')

    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; }

    Reviewed by lucodifier at 2021-09-03 21:05
  • 9. Unknown Prop Warning for 'includeMargin'

    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.

    Reviewed by NikolaDojic at 2018-12-25 12:44
  • 10. Additional props to QR code components not supported in Typescript types

    The docs says:

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

    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
    
    Reviewed by brookback at 2022-04-04 13:45
  • 11. SVG generated with `shapeRendering` attribute instead of `shape-rendering`

    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} />

    Reviewed by kopijunkie at 2020-07-22 16:55
  • 12. Generate QR Code and get base64 without displaying on page

    I'm wondering if there is a way to generate the QR Code in js code and get the base64 without displaying it on the page.

    I figured out how to get the base64 from an existing QR code on the page with the following:

    	const qrCodeCanvas = document.querySelector('canvas');
    	const qrCodeDataUri = qrCodeCanvas.toDataURL('image/jpg', 0.1);
    	setQRCodeString(qrCodeDataUri);
    

    But then I have to hide the qr code with css, and it seems very inefficient. Plus I need to be able to generate multiple different QR code base64 strings. The reason I need the base64 strings is to display them in a PDF using react-pdf (https://react-pdf.org/). Supposedly that pdf library supports SVG, but I couldn't get it to work.

    Reviewed by mdodge-ecgrow at 2022-04-26 20:06
  • 13. What is level and image src?

    I am brand new to using this library. And I was looking through the documentation on the home page. Most of the properties are pretty self explanatory. But two that I can not figure out are level and the src in the image object. It'd be nice if you at least included a sentence about these properties in the docs.

    Reviewed by mdodge-ecgrow at 2022-04-16 03:24
  • 14. Logos should keep the original aspect ratio and not squeeze

    This is regarding line 421 of index .js

    preserveAspectRatio="none" should be preserveAspectRatio="xmidYMid meet"

    which will keep the proportions of the source image without stretching or squishing it

    Reviewed by andyfitz at 2021-11-11 12:09
A helper library to use react-query more efficient, consistency

A helper library to use react-query more efficient, consistency

May 13, 2022
A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.

React Translate Component Translate is a component for React that utilizes the Counterpart module and the Interpolate component to provide multi-lingu

May 17, 2022
๐Ÿ“ A resizable component for React.
 ๐Ÿ“ A resizable component for React.

?? A resizable component for React.

May 5, 2022
Flatten a React "pyramid of doom" by composing multiple layers into a single component.

Flatten a React "pyramid of doom" by composing multiple layers into a single component.

Dec 20, 2021
React library to send nodes into a node at a different place in the component tree.

Unopinionated React library to render content into another place of the React tree (without losing the React context). This is especially useful for modals or popovers.

Jun 4, 2020
A ReactJS password recovery box component built using the FluentUI library
A ReactJS password recovery  box component built using the FluentUI library

A ReactJS password recovery box component built using the FluentUI library

Mar 18, 2022
๐Ÿฆค Give me MDX/TSX strings and I'll give you back a component you can render. Supports imports!
๐Ÿฆค Give me MDX/TSX strings and I'll give you back a component you can render. Supports imports!

mdx-bundler ?? Compile and bundle your MDX files and their dependencies. FAST. The problem You have a string of MDX and various TS/JS files that it us

May 8, 2022
A lightweight react library that converts raw HTML to a React DOM structure.

A lightweight react library that converts raw HTML to a React DOM structure.

May 9, 2022
React-intersection-observer - Intersection observer With React
React-intersection-observer - Intersection observer With React

react-intersection-observer Package ?? Copy and Paste the Framer Package Usage F

Feb 17, 2022
React-compress - This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundle code
React-compress - This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundle code

React-compress - This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundle code

Apr 20, 2022
React adblocker detect - Provides you with react hook to detect is an adblocker is enabled

React adblocker detect - Provides you with react hook to detect is an adblocker is enabled

Mar 15, 2022
A react or react native library to call functions comparing the last time that it was called
A react or react native library to call functions comparing the last time that it was called

A react or react native library to call functions comparing the last time that it was called and running it when it's really needed. Avoiding unnecessary database calls or data loads that are updated at a certain time.

Apr 18, 2022
React-native-dotenv - Load react native environment variables using import statements for multiple env files.

react-native-dotenv Load environment variables using import statements. Installation $ npm install react-native-dotenv Breaking changes: moving from v

May 9, 2022
Extended utils for โš›๏ธ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.
Extended utils for โš›๏ธ  React.Children data structure that adds recursive filter, map and more methods to iterate nested children.

React Children Utilities Recursive and extended utils for React children opaque data structure. Installation Available as a package and can be added t

May 4, 2022
CSS media queries for React

react-media react-media is a CSS media query component for React. A <Media> component listens for matches to a CSS media query and renders stuff based

May 5, 2022
A static site generator powered by Deno + React
A static site generator powered by Deno + React

A static site generator powered by Deno + React

May 14, 2022
The next generation state management library for React

The next generation state management library for React

Apr 27, 2022
Declarative hotkey and focus area management for React

React HotKeys A declarative library for handling hotkeys and focus areas in React applications. Upgrading from 1.*.* ? See the upgrade notes. Looking

May 12, 2022
๐Ÿ“ฆ noov.js for react ssr solution
๐Ÿ“ฆ noov.js for react ssr solution

?? noov.js for react ssr solution

Mar 30, 2022