Package Exports

react-qr-code
react-qr-code/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-qr-code) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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