README

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

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
]}