You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
2.4 KiB
68 lines
2.4 KiB
# 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 <QRCode /> 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/) |
|
|
|
<img src="https://github.com/rosskhanas/react-qr-code/blob/master/demo-web.png" width="640" /> |
|
|
|
#### Android & iOS |
|
|
|
<div float="left"> |
|
<img src="https://github.com/rosskhanas/react-qr-code/blob/master/demo-android.png" width="320" /> |
|
<img src="https://github.com/rosskhanas/react-qr-code/blob/master/demo-ios.png" width="265" /> |
|
</div> |
|
|
|
### Installation |
|
|
|
``` |
|
yarn add 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). |
|
|
|
``` |
|
yarn add 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(<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](https://qrworld.wordpress.com/2011/08/09/the-quiet-zone/)', e.g. |
|
```javascript |
|
<div style={{ background: 'white', padding: '16px' }}> |
|
<QRCode ... /> |
|
</div> |
|
``` |
|
|
|
|
|
### API |
|
|
|
| prop | type | default value | |
|
| --------- | ---------------------------- | ------------- | |
|
| `bgColor` | `string` | '#FFFFFF' | |
|
| `fgColor` | `string` | '#000000' | |
|
| `level` | `string` (`'L' 'M' 'Q' 'H'`) | 'L' | |
|
| `size` | `number` | 256 | |
|
| `title` | `string` | | |
|
| `value` | `string` | | |
|
|
|
### License |
|
|
|
MIT
|
|
|