zpao / qrcode.react

A <QRCode/> component for use with React.

qrcode.react

A React component to generate QR codes for rendering to the DOM.

Installation

npm install qrcode.react

Usage

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

import ReactDOM from 'react-dom';
import {QRCodeSVG} from 'qrcode.react';

ReactDOM.render(
  <QRCodeSVG value="https://reactjs.org/" />,
  document.getElementById('mountNode')
);

QRCodeCanvas

import ReactDOM from 'react-dom';
import {QRCodeCanvas} from 'qrcode.react';

ReactDOM.render(
  <QRCodeCanvas value="https://reactjs.org/" />,
  document.getElementById('mountNode')
);

Available Props

prop	type	default value	note
value	string
size	number	128
bgColor	string	"#FFFFFF"	CSS color
fgColor	string	"#000000"	CSS color
level	string ('L' 'M' 'Q' 'H')	'L'
minVersion	number (1-40)	1	QR Code versions are 1-40. The optimal (lowest) version is determined for the value provided, using this minimum as the lower bound.
includeMargin	boolean	false	DEPRECATED. This is being remvoed in favor of marginSize
marginSize	number	0	Specifies the number of modules to use for margin around the symbol. The QR Code specification requires 4, however you may use other values. Values will be turned to integers with Math.floor. Overrides includeMargin default value when specified
imageSettings	object		See below

imageSettings

field	type	default value	note
src	string
x	number	none	Will attempt to center if not specified
y	number	none	Will attempt to center if not specified
height	number	10% of size
width	number	10% of size
excavate	boolean	false
opacity	number	1

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>.

Encoding Mode

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.

qrcode.react bundles QR Code Generator, which is available under the MIT license.

qrcode.react's Issues

why not support percentage?

I want to set width 100%,but not support.

How to use this qrcode

how to use this qrcode and implement in my real code...

below my current code i try to implement but nothing happen:-

import ReactDOM from 'react-dom';

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

ReactDOM.render(<QRCode value="http://facebook.github.io/react/" />, mountNode);

how

Chinese garbled-中文乱码

when I scan the qrCode which has Chinese content，
the content on my phone is garbled.
how can I do to solve it?
has anyone can tell me some ways ?
thanks a lot.

How to name QR Code images?

Right now all of my generated QR codes download as "download", I noticed in the example that they are called "qrcode" but not seeing how to set that explicitly.

Any info would be 👍

add img (logo) api not found?

is update release ?

Feature request: add data-qrcode property to the canvas element.

Hi

I'm writing an automatic test for enabling and disabling MFA where I need to read the QR code. Unfortunately I'm not able to read the data from the image, so instead, I wrapped the QR code in a div, where I render the qrcode value as a data attribute on the div, so it's in the DOM and in the test I can read the value.

I thought, that it would be nice to have the data-qrcode on the canvas itself, so I can drop the custom code.

What do you think about that?

custom code which I would like to drop...

import React from 'react';
import PropTypes from 'prop-types';
import QRCode from 'qrcode.react';

const EnhancedQRCode = ({ value }) => (
  <div data-qrcode={value}>
    <QRCode value={value} />
  </div>
);

EnhancedQRCode.propTypes = {
  value: PropTypes.string.isRequired,
};

export default EnhancedQRCode;

Feature Request: Support custom logo

Thanks for developing this tool. Is it possible to render a custom logo in the centre of the QR code please?

Something like:

<QRCode {...props}>
	<img src='./my-logo.png' alt='' />
</QRCode>

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 lowercase includemargin instead. If you accidentally passed it from a parent component, remove it from the DOM element.

hello, I want to change qrcode into img picture with react, what can I do ?

If you watch the news , please help~It bothers me

什么时候可以更新 自己配置生成带logo的二维码？

No usable data found

I had issue when using camera iphone hw with IOS:12.1.4 and messenger appear "No usable data found".
How can i fix this issue.Sorry, my english is not good.
Thanks

React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

warning.js:36Warning: QRCode: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

PureRenderMixin

Could this component be use a PureRenderMixin?

Sometimes it will show a black image on android devices

Not often ,Once every 20 times。only show me a black image。

0.9.3版本生成的二维码在华为手机上打开 有小方格

0.9.3版本生成的二维码在华为手机上打开 有小方格 有一格一格的小方格 导致识别不了， 0.9.2无问题 使用代码如此<QRCode value={qrcode} size={155} />

QR conversion for Chinese is not expect

When I input Chinese, the QR code was not correctly generated, when i Scan it with SCAN app, it got nothing, may I have you advise on how should I fix this issue?

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.

React 15 version check

There's a version check for 0.14, needs to also support 15

renderToString wont do the trick

Hi, thanks for awesome component! I was wondering if anyone had a situation where QRCode would have to be rendered from a template string? I thought reacts renderToString would do the trick but it doesn't seem to be working. Any ideas?

Thanks

update dependency to react 0.10.0

I've done a small test locally and it appears to work fine. Most people will be using React 0.10.0 now and you can't have conflicting React versions, so it gives errors when including this component

Feature Request: Support custom template

Hi,
i need to combine an image as template with qr-code.
i can create a canvas an draw two image in it, but do you have a better ideas a new feature?

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?

React16 support

With react currently at -rc.3 and should be actually releasing 16 this week, is it possible to bump these dependencies?

Qrcode not working on ios google authenticator 2

React 15.5 protypes

Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead

Thank you

renderAs = "svg" is not working

renderAs = "svg" is not working and there's no documentation even though the feature is implemented.

Also, is there a way to make rounded qrcode like here: demo

How to download QR Code images?

Error: code length overflow. (24532>23648)

Apparently passing a long value to makes it crash.
Any workaround for this?

React 0.14 support

Prints very bad (on paper)

Qrcode not working

Hi,
Qrcode not working after build but working in development.

can I create QR code with transparent background?

found 388 vulnerabilities

After installed, I got below message. Can I use this?
found 388 vulnerabilities (331 low, 40 moderate, 16 high, 1 critical)
run npm audit fix to fix them, or npm audit for details

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Coming from:

var QRCode = React.createClass({
displayName: 'QRCode',

propTypes: {
value: React.PropTypes.string.isRequired,

flow-bin dependency

Why is this a dependency not a dev dependency?
It comes bundled in 0.7.0...

ping @zpao

can i create qr code with logo？

can i create qr code with logo？

How can i add 'id' to the canvas?

I need do something with the canvas...

qrcode.react 生成的二维码是永久的吗

includeMargin bug with canvas renderer

The newly added includeMargin feature is working for the SVG renderer but is not centering the qr code contents with the canvas renderer. This can be reproduced using the project demo page

SVG renderer

Canvas renderer

Create QR Code with border

Hi,
Thank you so much for this great work generating QR code. I have recently encountered an issue that if my client downloads the generated QR code and placed it on top of a complete black background, then QR scan will fail since the QR code does not have white border and thus merges with the black background.

Would there be an easy way to add a thin white border around the generated QR code?

Thanks in advance!

Update browser support

Currently we use last 2 versions, which includes some old browsers that will never get another version (eg IE11). I'm proposing limiting this to >0.25%, not dead, not op_mini all, not ie 11, not android 4.4.3-4.4.4.

This shaves off ~3.5KB before any minification, and importantly makes use of more native language features:

• classes
• arrow functions
• template strings

Anybody have opinions or particular needs for older browser support?

how to download qrcode

how to download qrcode

update dependency to react 0.11.0

You're going to hate me :)

Is it worth perhaps changing the version number be less specific, more "compatible with"? Perhaps, ">= 0.11.0" (as is done here in reactify)?

how to join logo picture into this corde?

one way is use img label to cover the center of this code? but this is not what i want ,when you save this code, you can see the logo will appear in code picture.
so could you add this function?

Support server-side rendering

hi i need to create a qr code from my sever, curentlly i user express-react-view but nothing was render, one thing and it's i have canvas , a canvas that qrcode.react does created but no qr code showed on this canvas

why it requires react.native

react.native should be implemented in another library

IE10 compatibility

qrcode.react doesn't currently render in IE10 - the demo appears blank. The canvas is there, and there are no errors, but it's blank. Looking into it.

Download QR for Mobile

I realize this issue has been raised by several people and answered well, and I implemented to good effect on my web browser. I seem however to be quite the work to download on my phone, using chrome, is there a workaround for this?

Post-update API

There are a couple canvas APIs that could be nice to expose, specifically toDataURL and toBlob, primarily to do something with the canvas data (most obvious is download the file).

I'm thinking perhaps something like this:

this.props.onUpdate({
  toDataURL: canvas.toDataURL,
  toBlob: canvas.toBlob
})

This sidesteps the problem of having to figure out how to get the non-default args for those calls without ballooning the component API.

I'm not sure if anybody cares but figured I'd post this idea now before I forget (instead of just shipping it at midnight with very little thought)

(back here on this because of #19 and re-reading #17)