react-qrcode-logo
Typescript React component to generate a customizable QR Code.
Installation
npm install --save react-qrcode-logo
Usage
import * as React from 'react';
import { QRCode } from 'react-qrcode-logo';
React.render(
<QRCode value="https://github.com/gcoro/react-qrcode-logo" />,
mountNode
);
Props
Prop | Type | Default value | Description |
---|
value | string | https://reactjs.org/ | The value encoded in the QR Code. When the QR Code is decoded, this value will be returned |
ecLevel | L | M | Q | H | M | The error correction level of the QR Code |
enableCORS | boolean | false | Enable crossorigin attribute |
size | number (in pixels) | 150 | The size of the QR Code |
quietZone | number (in pixels) | 10 | The size of the quiet zone around the QR Code. This will have the same color as QR Code bgColor |
bgColor | string (css color) | #FFFFFF | Background color |
fgColor | string (css color) | #000000 | Foreground color |
logoImage | string (src attribute) | | The logo image. It can be a url/path or a base64 value |
logoWidth | number (in pixels) | size * 0.2 | Logo image width |
logoHeight | number (in pixels) | logoWidth | Logo image height |
logoOpacity | number (css opacity 0 <= x <= 1) | 1 | Logo opacity. This allows you to modify the transparency of your logo, so that it won't compromise the readability of the QR Code |
qrStyle | squares | dots | squares | Style of the QR Code modules |
eyeRadius | number | number[] | number[][] | | The corner radius for the positional patterns (the three "eyes" around the QR code). See more details below |
id | string | react-qrcode-logo | Optional custom id for the QRCode canvas. You can use this prop if you have multiple QRCodes and need to differentiate them |
About eyeRadius
Give the positional pattern custom radii. You can either set one radius for all corners or all positional eyes, or
specify a radius for each corner of each eye.
Simple example:
<QRCode
value="https://github.com/gcoro/react-qrcode-logo"
eyeRadius={5}
/>
Other examples:
eyeRadius={[
5,
10,
5,
]}
eyeRadius={[
[10, 10, 0, 10],
[10, 10, 10, 0],
[10, 0, 10, 10],
]}
eyeRadius={[
{
outer: [10, 10, 0, 10],
inner: [0, 10, 10, 10],
},
[10, 10, 10, 0],
[10, 0, 10, 10],
]}
Usage example
You can find a very simple demo project here.
Contributing
Thanks to everyone who contributed :) PRs and suggestions are welcome.
More credits
This package was inspired by cssivision/qrcode-react and zpao/qrcode.react. Also looked up some parts from kazuhikoarase/qrcode-generator (which this package depends on).