react-qrcode-pretty

Qrcode generator website

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

    );

}

Qrcode Examples

Author

• Guilherme Neves - github - website

License

This project is under the MIT license - see file LICENSE for details.