Installation

pnpm add @awesome-qrcode/react

Props

The following props are used to customize the QR code:

NameTypeDefaultDescription
valuestringAwesome QRCodeThe data to be encoded in the QR code.
sizenumber150The size of the QR code in pixels.
dataStyleDataStylesquaresThe style of the QR code data modules.
ecLevelECLevelMThe error correction level of the QR code.
quietZonenumber10The size of the quiet zone around the QR code in pixels.
bgColorstring#FFFFFFThe background color of the QR code.
fgColorstring#000000The color of the QR code modules.
logoImagestringThe URL of the image to be displayed in the center of the QR code.
logoWidthnumber40The width of the logo in pixels.
logoHeightnumber40The height of the logo in pixels.
logoOpacitynumber1The opacity of the logo. Ranges from 0 to 1.
logoPaddingnumber0The padding around the logo in pixels.
logoRadiusStyleLogoRadiusStyleThe shape of the padding around the logo.
removeQrCodeBehindLogobooleanWhether to remove the QR code modules behind the logo.
eyeRadiusEyeRadius0The radius of the corners of the positioning eyes in pixels.
eyeColorEyeColorThe color of the positioning eyes.
onLoadfunctionThe function to be called when the QR code has loaded.
onErrorfunctionThe 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