QRCode
Importimport{ QRCode }from"antd"; |
Sourcecomponents/qr-code |
Versionsupported since 5.1.0 |
When To Use
Used when the text needs to be converted into a QR Code.
Examples
Basic Usage.
QR code expired
Scanned
The status can be controlled by the value status, four values of active, expired, loading, scanned are provided.
Customize the rendering results by type, provide options canvas and svg.
Custom Color.
set Error Level.
QRCode with Icon.
Loading...
You can control the rendering logic of the QR code in different states through the value of statusRender.
Custom Size.
A way to download QRCode.
With Popover.
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
Global TokenHow to use?
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.