logoNamu Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
1.0.0
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
base
With Icon
other status
Custom Render Type
Custom Size
Custom Color
Download QRCode
Error Level
Advanced Usage
API
Design Token
FAQ
About QRCode ErrorLevel

QRCode

    • PopoverSegmented

    Resources

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design in YuQue
    Namu Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Namu Design Community

    Components that can convert text into QR codes, and support custom color and logo. Available since antd@5.1.0.

    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.

    When To Use

    Used when the text needs to be converted into a QR Code.

    Examples

    base

    Basic Usage.

    expand codeexpand code
    other status

    The status can be controlled by the value status.

    expand codeexpand code
    Custom Size

    Custom Size.

    expand codeexpand code
    Download QRCode

    A way to download QRCode.

    expand codeexpand code
    Advanced Usage

    With Popover.

    expand codeexpand code
    With Icon

    QRCode with Icon.

    expand codeexpand code
    Custom Render Type

    Customize the rendering results by type, provide options canvas and svg.

    expand codeexpand code
    Custom Color

    Custom Color.

    expand codeexpand code
    Error Level

    set Error Level.

    expand codeexpand code

    API

    Common props ref：Common props

    This component is available since antd@5.1.0

    PropertyDescriptionTypeDefaultVersion
    valuescanned textstring-
    typerender typecanvas | svg canvas5.6.0
    iconinclude image url (only image link are supported)string-
    sizeQRCode sizenumber128
    iconSizeinclude image sizenumber32
    colorQRCode Colorstring#000
    bgColorQRCode Background Colorstringtransparent5.5.0
    borderedWhether has border stylebooleantrue
    errorLevelError Code Level'L' | 'M' | 'Q' | 'H' M
    statusQRCode statusactive | expired | loading active
    onRefreshcallback() => void-

    Design Token

    Global 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

    QR code expired

    icon