# react-qr-code [![npm package](https://badge.fury.io/js/react-qr-code.svg)](https://www.npmjs.org/package/react-qr-code) [![Dependency Status](https://david-dm.org/rosskhanas/react-qr-code.svg)](https://david-dm.org/rosskhanas/react-qr-code) [![devDependency Status](https://david-dm.org/rosskhanas/react-qr-code/dev-status.svg)](https://david-dm.org/rosskhanas/react-qr-code#info=devDependencies) [![peerDependency Status](https://david-dm.org/rosskhanas/react-qr-code/peer-status.svg)](https://david-dm.org/rosskhanas/react-qr-code#info=peerDependencies) A component for React. This library works with React and React Native (using [React Native SVG](https://github.com/react-native-svg/react-native-svg)). ### Screenshots #### [Web](https://rosskhanas.github.io/react-qr-code/)

#### 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](https://github.com/react-native-svg/react-native-svg#installation). ``` npm i react-native-svg cd ios && pod install ``` ### The Gist ```javascript import React from "react"; import ReactDOM from "react-dom"; import QRCode from "react-qr-code"; ReactDOM.render(, 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](https://qrworld.wordpress.com/2011/08/09/the-quiet-zone/)', e.g. ```javascript

``` Responsive QR code example: ```javascript // Can be anything instead of `maxWidth` that limits the width.

``` ### 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

	Stars	Issues	Version	Updated	Created
@zxing/library	2,328	153	0.21.0	22 days ago	6 years ago
react-barcode	380	13	1.5.3	4 days ago	8 years ago
react-qr-code	652	14	2.0.13	7 days ago	8 years ago
react-qr-reader	1,110	147	3.0.0-beta-1	2 years ago	8 years ago

@zxing/library vs react-barcode vs react-qr-code vs react-qr-reader

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past