components/qr-code/index.en-US.md
Used when the text needs to be converted into a QR Code.
<code src="./demo/base.tsx">base</code> <code src="./demo/icon.tsx">With Icon</code> <code src="./demo/status.tsx">other status</code> <code src="./demo/customStatusRender.tsx" version="5.20.0">custom status render</code> <code src="./demo/type.tsx">Custom Render Type</code> <code src="./demo/customSize.tsx">Custom Size</code> <code src="./demo/customColor.tsx">Custom Color</code> <code src="./demo/download.tsx">Download QRCode</code> <code src="./demo/errorlevel.tsx">Error Level</code> <code src="./demo/Popover.tsx">Advanced Usage</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code>
Common props ref：Common props
This component is available since
[email protected]
| 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 | render type | canvas | svg | canvas | 5.6.0 |
| value | scanned text | string | - |
type StatusRenderInfo = {
status: QRStatus;
locale: Locale['QRCode'];
onRefresh?: () => void;
};
<code src="./demo/_semantic.tsx" simplify="true"></code>
<ComponentTokenTable component="QRCode"></ComponentTokenTable>
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.