react-qr-code

react-qr-code

A component for React. This library works with React and React Native (using React Native SVG).

Screenshots

Web

Android & iOS

Installation

npm i react-qr-code

When using this library with React Native, you will also need to have react-native-svg installed.

npm i react-native-svg
cd ios && pod install

The Gist

import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";

ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));

Note: If the QR code is likely to appear next to dark objects, you will need to wrap it in a light-colored container to preserve the 'quiet zone', e.g.

<div style={{ background: 'white', padding: '16px' }}>
  <QRCode ... />
</div>

Responsive QR code example:

// Can be anything instead of `maxWidth` that limits the width.
<div style={{ height: "auto", margin: "0 auto", maxWidth: 64, width: "100%" }}>
  <QRCode
    size={256}
    style={{ height: "auto", maxWidth: "100%", width: "100%" }}
    value={value}
    viewBox={`0 0 256 256`}
  />
</div>

API

prop	type	default value	platform
bgColor	string	'#FFFFFF'	web, ios, android
fgColor	string	'#000000'	web, ios, android
level	string ('L' 'M' 'Q' 'H')	'L'	web, ios, android
size	number	256	web, ios, android
title	string		web
value	string		web, ios, android

Adheres to the official QR spec and can store up to 2953 characters in value.

License

MIT

Similar packages

Other packages similar to react-qr-code

qrcode.react

qrcode.react is another popular React library for generating QR codes. It offers similar functionality to react-qr-code, including the ability to customize the size and colors of the QR code. However, qrcode.react provides additional features such as error correction levels and support for rendering QR codes as SVG elements.

react-qr-svg

react-qr-svg is a React component for generating QR codes as SVG elements. It provides similar functionality to react-qr-code but focuses on rendering QR codes as scalable vector graphics (SVG). This can be beneficial for applications that require high-quality, scalable QR codes.

react-qr

react-qr is a lightweight React component for generating QR codes. It offers basic QR code generation functionality similar to react-qr-code but with fewer customization options. It is suitable for simple use cases where minimal configuration is needed.