Installation
pnpm add @awesome-qrcode/reactProps
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)