ant-design/components/qr-code/index.en-US.md
kiner-tang 3851af9607
feat: support custom status render in qrcode ()
* feat: support custom status render in qrcode

* feat: support custom status render in qrcode

* feat: add test case

* fix: code review

* fix: code review

* fix: code review

* fix: code review

* feat: optimize code

* feat: optimize code

* Update components/qr-code/index.zh-CN.md

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: kiner-tang <1127031143@qq.com>

* Update components/qr-code/index.en-US.md

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: kiner-tang <1127031143@qq.com>

* feat: opt code

Signed-off-by: kiner-tang <1127031143@qq.com>

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* Update components/qr-code/index.en-US.md

Signed-off-by: kiner-tang <1127031143@qq.com>

* Update components/qr-code/index.zh-CN.md

Signed-off-by: kiner-tang <1127031143@qq.com>

---------

Signed-off-by: kiner-tang <1127031143@qq.com>
Co-authored-by: lijianan <574980606@qq.com>
2024-07-12 10:49:47 +08:00

3.3 KiB
Raw Blame History

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 refCommon 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.