Importimport { QRCode } from 'antd'; |
contributors
Used when the text needs to be converted into a QR Code.
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 |
| marginSize | Quiet zone size (in modules). 0 means no margin | number | 0 | 6.2.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 StatusRenderInfo = {status: QRStatus;locale: Locale['QRCode'];onRefresh?: () => void;};
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorSplit | Used as the color of separator, this color is the same as colorBorderSecondary but with transparency. | string | rgba(5,5,5,0.06) |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorWhite | Pure white color don't changed by theme | string | #fff |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| controlHeight | The height of the basic controls such as buttons and input boxes in Ant Design | number | 32 |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| paddingSM | Control the small padding of the element. | number | 12 |
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
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.
QR code expired
Scanned
Loading...