https://github.com/rosskhanas/react-qr-code
A QR code generator for React and React Native.
https://github.com/rosskhanas/react-qr-code
component qr-code react react-native
Last synced: 10 months ago
JSON representation
A QR code generator for React and React Native.
- Host: GitHub
- URL: https://github.com/rosskhanas/react-qr-code
- Owner: rosskhanas
- License: mit
- Created: 2016-07-28T22:43:55.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-05-13T15:33:47.000Z (almost 2 years ago)
- Last Synced: 2024-05-22T07:02:45.504Z (almost 2 years ago)
- Topics: component, qr-code, react, react-native
- Language: Java
- Homepage: https://rosskhanas.github.io/react-qr-code/
- Size: 6.12 MB
- Stars: 652
- Watchers: 9
- Forks: 71
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - react-qr-code
README
# react-qr-code
[](https://www.npmjs.org/package/react-qr-code)
[](https://david-dm.org/rosskhanas/react-qr-code)
[](https://david-dm.org/rosskhanas/react-qr-code#info=devDependencies)
[](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 |
Adheres to the [official QR spec](https://www.qrcode.com/en/about/version.html) and can store up to 2953 characters in `value`.
### License
MIT