A <QRCode/> component for use with React.
Alternatives To Qrcode.react
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
9 months ago143mitJavaScript
Wifi Card6,376
a month ago2mitJavaScript
📶 Print a QR code for connecting to your WiFi (wificard.io)
React Native Vision Camera5,42011310 hours ago113November 23, 2023128mitSwift
📸 A powerful, high-performance React Native Camera library.
3 months ago26gpl-3.0JavaScript
An art QR code (qrcode) beautifier. 艺术二维码生成器。https://qrbtf.com
Qrcode.react3,5271,25491116 days ago26June 25, 202234otherTypeScript
A <QRCode/> component for use with React.
React Native Qrcode Scanner1,986171267 months ago51February 11, 2022123mitJavaScript
A QR code scanner component for React Native.
React Qr Reader1,0703a day ago7November 20, 2023136mitTypeScript
React component for reading QR codes from webcam.
React Native Qrcode Svg97594607 days ago36January 19, 202332mitJavaScript
A QR Code generator for React Native based on react-native-svg and node-qrcode.
React Native Qrcode845280212 years ago27July 25, 201849mitJavaScript
a minimalist qrcode component for react-native
React Native Qrcode Scanner View67723 years ago3January 08, 201815apache-2.0JavaScript
A highly customizable QR code scanning component for React Native
Alternatives To Qrcode.react
Select To Compare

Alternative Project Comparisons


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


npm install qrcode.react


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.


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

  <QRCodeSVG value="https://reactjs.org/" />,


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

  <QRCodeCanvas value="https://reactjs.org/" />,

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


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.


qrcode.react is licensed under the ISC license.

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

Popular Qrcode Projects
Popular Reactjs Projects
Popular Media Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.