Typescript React component to generate a customizable QR Code.
npm install --save react-qrcode-logoimport * as React from 'react';
import { QRCode } from 'react-qrcode-logo';
React.render(
<QRCode value="https://github.com/gcoro/react-qrcode-logo" />,
mountNode
);| 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 |
logoOnLoad |
() => void |
Callback function to know when the logo in the QR Code is loaded | |
removeQrCodeBehindLogo |
boolean |
false |
Removes points behind the logo. If no logoPadding is specified, the removed part will have the same size as the logo |
logoPadding |
number |
Adds a border with no points around the logo. When > 0, the padding will be visible even if the prop removeQrCodeBehindLogo is not set to true | |
logoPaddingStyle |
square | circle |
square |
Sets the shape of the padding area around the logo |
qrStyle |
squares | dots | fluid |
squares |
Style of the QR Code modules |
eyeRadius |
CornerRadii | CornerRadii[] |
The corner radius for the positional patterns (the three "eyes" around the QR code). See more details here | |
eyeColor |
EyeColor | EyeColor[] |
The color for the positional patterns (the three "eyes" around the QR code). See more details here | |
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 |
You can find a very simple demo project here.
PRs and suggestions are welcome. When making a pull request, please explain in a clear way the changes you made and why you are making them (+ if you can also update the README accordingly, ty <3). Also try keep the current repo codestyle (eg. do not reformat all the code with prettier).
Thanks to everyone who contributed and/or will contribute :)
 gcoro |
 jgillick |
 dos1in |
 halitogunc |
 joellord |
 Michael-AT-Corporation |
 qwei-1874 |
 Trexy94 |
 ty-everett |
 larstel |
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).
