ant-design/components/qr-code/index.en-US.md

category, title, description, cover, coverDark, demo, group

category	title	description	cover	coverDark	demo	group
Components	QRCode	Components that can convert text into QR codes, and support custom color and logo.	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M4PBTZ_n9OgAAAAAAAAAAAAADrJ8AQ/original	cols 2	title order Data Display 5

When To Use

Used when the text needs to be converted into a QR Code.

Examples

base With Icon other status custom status render Custom Render Type Custom Size Custom Color Download QRCode Error Level Advanced Usage Custom semantic dom styling

API

Common props ref：Common props

This component is available since antd@5.1.0

Property	Description	Type	Default	Version
value	scanned text	string | string[]	-	string[]: 5.28.0
type	render type	canvas | svg	canvas	5.6.0
icon	include image url (only image link are supported)	string	-
size	QRCode size	number	160
iconSize	include image size	number | { width: number; height: number }	40	5.19.0
color	QRCode Color	string	#000
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>	-
bgColor	QRCode Background Color	string	transparent	5.5.0
bordered	Whether has border style	boolean	true
errorLevel	Error Code Level	'L' | 'M' | 'Q' | 'H'	M
boostLevel	If enabled, the Error Correction Level of the result may be higher than the specified Error Correction Level	boolean	true	5.28.0
status	QRCode status	active | expired | loading | scanned	active	scanned: 5.13.0
statusRender	custom status render	(info: [StatusRenderInfo](/components/qr-code-cn#statusrenderinfo)) => React.ReactNode	-	5.20.0
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>	-
type	render type	canvas | svg	canvas	5.6.0
value	scanned text	string	-

StatusRenderInfo

type StatusRenderInfo = {
  status: QRStatus;
  locale: Locale['QRCode'];
  onRefresh?: () => void;
};

Semantic DOM

Design Token

FAQ

About QRCode ErrorLevel

The ErrorLevel means that the QR code can be scanned normally after being blocked, and the maximum area that can be blocked is the error correction rate.

Generally, the QR code is divided into 4 error correction levels: Level L can correct about 7% errors, Level M can correct about 15% errors, Level Q can correct about 25% errors, and Level H can correct about 30% errors. When the content encoding of the QR code carries less information, in other words, when the value link is short, set different error correction levels, and the generated image will not change.

For more information, see the: https://www.qrcode.com/en/about/error_correction

⚠️⚠️⚠️ Cannot scan the QR code?

If the QR code cannot be scanned for identification, it may be because the link address is too long, which leads to too dense pixels.

You can configure the QR code to be larger through size, or shorten the link through short link services.