react-qrcode-logo

Typescript React component to generate a customizable QR Code.

Installation

npm install --save @jackybaby/react-custom-qrcode

Usage

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.

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).