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

category	title	description	cover	coverDark	demo	group	tag
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	5.1.0

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

API

Common props ref：Common props

This component is available since antd@5.1.0

Property	Description	Type	Default	Version
value	scanned text	string	-
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
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
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
onRefresh	callback	() => void	-

StatusRenderInfo

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

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.