react-qr-code
TypeScript icon, indicating that this package has built-in type declarations

2.0.15 • Public • Published

react-qr-code

npm package Dependency Status devDependency Status peerDependency Status

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

Screenshots

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

License

MIT

Package Sidebar

Install

npm i react-qr-code

Weekly Downloads

514,649

Version

2.0.15

License

MIT

Unpacked Size

13.6 kB

Total Files

7

Last publish

Collaborators

  • rtkhanas