# qrcode.react
A React component to generate [QR codes](http://en.wikipedia.org/wiki/QR_code) for rendering to the DOM.
## Installation
```sh
npm install qrcode.react
```
## Usage
`qrcode.react` exports three components, supporting rendering as SVG or Canvas. SVG is generally recommended as it is more flexible, but Canvas may be preferable.
All examples are shown using modern JavaScript modules and syntax. CommonJS `require('qrcode.react')` is also supported.
### `QRCodeSVG`
```js
import ReactDOM from 'react-dom';
import {QRCodeSVG} from 'qrcode.react';
ReactDOM.render(
,
document.getElementById('mountNode')
);
```
### `QRCodeCanvas`
```js
import ReactDOM from 'react-dom';
import {QRCodeCanvas} from 'qrcode.react';
ReactDOM.render(
,
document.getElementById('mountNode')
);
```
### `QRCode` - **DEPRECATED**
**Note:** Usage of this is deprecated as of v3. It is available as the `default` export for compatiblity with previous versions. The `renderAs` prop is only supported with this component.
```js
import ReactDOM from 'react-dom';
import QRCode from 'qrcode.react';
ReactDOM.render(
,
document.getElementById('mountNode')
);
```
## Available Props
| prop | type | default value |
| --------------- | ---------------------------- | ------------- |
| `value` | `string` |
| `renderAs` | `string` (`'canvas' 'svg'`) | `'canvas'` |
| `size` | `number` | `128` |
| `bgColor` | `string` (CSS color) | `"#FFFFFF"` |
| `fgColor` | `string` (CSS color) | `"#000000"` |
| `level` | `string` (`'L' 'M' 'Q' 'H'`) | `'L'` |
| `includeMargin` | `boolean` | `false` |
| `imageSettings` | `object` (see below) | |
### `imageSettings`
| field | type | default value |
| ---------- | --------- | ----------------- |
| `src` | `string` |
| `x` | `number` | none, will center |
| `y` | `number` | none, will center |
| `height` | `number` | 10% of `size` |
| `width` | `number` | 10% of `size` |
| `excavate` | `boolean` | `false` |
## Custom Styles
`qrcode.react` will pass through any additional props to the underlying DOM node (`