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: about 2 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 8 years ago)
• Default Branch: master
• Last Pushed: 2024-05-13T15:33:47.000Z (8 months ago)
• Last Synced: 2024-05-22T07:02:45.504Z (8 months 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

[![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