react-qrcode-logo
Typescript React component to generate a customizable QR Code.
Installation
npm install --save @jackybaby/react-custom-qrcodeUsage
import * as React from "react";
import { QRCode } from "@jackybaby/react-custom-qrcode";
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 |
removeQrCodeBehindLogo |
boolean |
false |
Removes points behind the logo and adds a border with no points around the logo |
qrStyle |
squares | dots
|
squares |
Style of the QR Code modules |
eyeColor |
string | string[]
|
The color for the inner and out parts of positional patterns (the three "eyes" around the QR code). See more details below | |
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} // 5 pixel radius for all corners of all positional eyes
/>Other examples:
// Radius for each eye
eyeRadius={[
5, // top/left eye
10, // top/right eye
5, // bottom/left eye
]}// Radius for each corner (array is: top/left, top/right, bottom/right, bottom/left)
eyeRadius={[
[10, 10, 0, 10], // top/left eye
[10, 10, 10, 0], // top/right eye
[10, 0, 10, 10], // bottom/left
]}// Include radius for the inner eye of the top/left eye
eyeRadius={[
{ // top/left eye
outer: [10, 10, 0, 10],
inner: [0, 10, 10, 10],
},
[10, 10, 10, 0], // top/right eye
[10, 0, 10, 10], // bottom/left
]}// Color for both parts (inner, out) of eyes
eyeColor = "#ffffff";// Color for each part of eyes
eyeColor={['#ff0000', '#00ff00']}Usage example
You can find a very simple demo project here.
Contributing
Thanks to everyone who contributed :) PRs and suggestions are welcome.
 gcoro |
 jgillick |
 JChord |
 halitogunc |
 mushang11 |
 Trexy94 |
 ty-everett |
 larstel |
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).