react-qrcode-pretty


Qrcode generator for react apps with many customization options.

!Qrcode example

Qrcode generator website

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
`

Resources

- QrcodeCanvas: React Element to generate a Qrcode with canvas.
- QrcodeSVG: React Element to generate a Qrcode with SVG.
- useQrcodeDownload: React Hook to download Qrcode in browser.

Qrcode Props

|Prop|Type|Default|Details|
|---|---|---|---|
| value | string | | Qrcode payload (required) |
| size | number | auto | Size of the qrcode without margin and padding |
| color | string
{ 'eyes': string, 'body': string } | '#000000' | Foreground color for the entire qrcode or for each part (eyes and body) of the qrcode |
| colorEffect | gradient-dark-vertical
gradient-dark-horizontal
gradient-dark-diagonal
gradient-light-vertical
gradient-light-horizontal
gradient-light-diagonal
colored
shades
none
{ 'eyes': colorEffect, 'body': colorEffect } | 'none' | Apply effects to coloring |
| 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
{ src: string; width ?: number; height ?: number; positionX ?: number; positionY ?: number; overlap ?: boolean; } | undefined | Settings for the image to be inserted into the qrcode |
| margin | number | 0 | Margin size. Area without background color |
| padding | number | 0 | Padding size. Area with background color |
| variant | standard
rounded
dots
circle
fluid
reverse
shower
gravity
morse
italic
inclined
{ '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 |
| internalProps | HTMLAttributes | undefined | The internal props attributes |
| onReady | (element : HTMLCanvasElement \| SVGSVGElements) => void | undefined | Provides element properties and methods when available. To be used with the useQrcodeDownload hook. |

Code Example

`js
import {
QrcodeCanvas,
useQrcodeDownload
} from "react-qrcode-pretty";

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

const [ setQrcode, download, isReady ] = useQrcodeDownload();

return (

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




onClick={ () => download('qrcode_file_name') }
disabled={ !isReady }
>Download Qrcode

);

}

export default QrcodeCustom;
``

Try it in the code sandbox

Qrcode Examples

!Qrcode example
!Qrcode example
!Qrcode example
!Qrcode example
!Qrcode example
!Qrcode example
!Qrcode example
!Qrcode example
!Qrcode example
!Qrcode example

Qrcode generator website

Author

* Guilherme Neves - github - website

License

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