React-qrcode-logo NPM

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
`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

Usage example

You can find a very simple demo project here.

Contributing

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