Qrcode generator for react apps with many customization options.
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
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. |
import { QrCode } from "react-qrcode-pretty";
export default function QrCodeCustom() {
return (
<QrCode
value="react-qrcode-pretty"
variant={{
eyes: 'gravity',
body: 'fluid'
}}
color={{
eyes: '#223344',
body: '#335577'
}}
padding={ 20 }
margin={ 30 }
bgColor="#ddeeff"
bgRounded
divider
/>
);
}
This project is under the MIT license - see file LICENSE for details.