Installation
pnpm add @awesome-qrcode/react
Props
The following props are used to customize the QR code:
Name | Type | Default | Description |
---|---|---|---|
value | string | Awesome QRCode | The data to be encoded in the QR code. |
size | number | 150 | The size of the QR code in pixels. |
dataStyle | DataStyle | squares | The style of the QR code data modules. |
ecLevel | ECLevel | M | The error correction level of the QR code. |
quietZone | number | 10 | The size of the quiet zone around the QR code in pixels. |
bgColor | string | #FFFFFF | The background color of the QR code. |
fgColor | string | #000000 | The color of the QR code modules. |
logoImage | string | The URL of the image to be displayed in the center of the QR code. | |
logoWidth | number | 40 | The width of the logo in pixels. |
logoHeight | number | 40 | The height of the logo in pixels. |
logoOpacity | number | 1 | The opacity of the logo. Ranges from 0 to 1. |
logoPadding | number | 0 | The padding around the logo in pixels. |
logoRadiusStyle | LogoRadiusStyle | The shape of the padding around the logo. | |
removeQrCodeBehindLogo | boolean | Whether to remove the QR code modules behind the logo. | |
eyeRadius | EyeRadius | 0 | The radius of the corners of the positioning eyes in pixels. |
eyeColor | EyeColor | The color of the positioning eyes. | |
onLoad | function | The function to be called when the QR code has loaded. | |
onError | function | The function to be called if there was an error loading the QR code. |
Extra types
/**
* Represents the style of the QR code data
*/
type DataStyle = "squares" | "dots";
/**
* Represents the style of the logo radius
*/
type LogoRadiusStyle = "square" | "circle";
/**
* Represents the error correction level of the QR code.
* Higher levels offer a better error resistance but reduce the symbol's capacity to be scanned.
*/
type ECLevel = "L" | "M" | "Q" | "H";
/**
* Represents a color configuration for an eye pattern.
* Can be a simple color (string) or a detailed configuration (InnerOuterColor).
*/
export type EyeColor = string | InnerOuterColor;
/**
* Provides detailed color configuration for an eye pattern.
*/
export type InnerOuterColor = {
/** Inner color of the eye pattern. */
inner: string;
/** Outer color of the eye pattern. */
outer: string;
};
/**
* Represents corner radii configuration for the position patterns.
* Can be a single radius (number) or a detailed configuration (InnerOuterRadius).
*/
export type EyeRadius = number | InnerOuterRadius;
/**
* Provides detailed radius configuration for an eye pattern.
*/
export type InnerOuterRadius = {
/** Inner radii of the pattern corners. */
inner: number;
/** Outer radii of the pattern corners. */
outer: number;
};
Methods
You can also retrieve the url of the QRCode, which will be parsed as base64
- This library is a refactor of Giulia Corò's react-qrcode-logo (opens in a new tab)
- This implementation is based on JIS X 0510:1999.
- The word "QR Code" is registered trademark of DENSO WAVE INCORPORATED (opens in a new tab)