React-qrcode-pretty NPM

react-qrcode-pretty

Qrcode generator for react apps with many customization options.

Installation

Run the command below in the terminal to install react-qrcode-pretty in your project

npm i react-qrcode-pretty

Or with Yarn

yarn add react-qrcode-pretty

QrCode Props

Prop	Type	Default	Details
value	`string`		Qrcode payload (required)
size	`number`	auto	Size of the qrcode without margin and padding
resize	`number`	undefined	Resize ready qrcode with CSS
color	`string` `{ 'eyes': string, 'body': string }`	'#000000'	Foreground color for the entire qrcode or for each part (eyes and body) of the qrcode
mode	`Numeric` `Alphanumeric` `Byte` `Kanji`	'Byte'	Mode that payload (value) will be logged
level	`L` `M` `Q` `H`	'M'	Error correction level
modules	`[0-40]`	0	Number of qrcode modules. 0 is auto
image	`string`	undefined	Location (src) of an image to be inserted into the center of the qrcode
imageBig	`boolean`	false	Image to be displayed in full size
overlap	`boolean`	false	For the image to overlay the qrcode without cropping it
margin	`number`	0	Margin size. Area without background color
padding	`number`	0	Padding size. Area with background color
variant	`standard` `rounded` `dots` `fluid` `reverse` `shower` `gravity` `morse` `{ 'eyes': variant, 'body': variant }`	'standard'	Style applied to the entire qrcode or each part (eyes and body) of it
divider	`boolean`	false	Active a small separation between the qrcode body points
bgColor	`string`	'#FFFFFF'	Background color
bgRounded	`boolean`	false	Background color rounded
children	`React.ReactNode`	undefined	The canvas tag children
canvasProps	`React.HTMLAttributes<HTMLCanvasElement>`	{}	The canvas attributes
onReady	`(canvas : HTMLCanvasElement) => void`	undefined	Provides canvas properties and methods when available.

Code Example

import { QrCode } from "react-qrcode-pretty";

export default function QrCodeCustom({ value = 'react-qrcode-pretty' }) {

    return (

        <QrCode
            value={ value }
            variant={{
                eyes: 'gravity',
                body: 'fluid'
            }}
            color={{
                eyes: '#223344',
                body: '#335577'
            }}
            padding={ 20 }
            margin={ 20 }
            bgColor='#ddeeff'
            bgRounded
            divider
        />

    );

}