logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.26.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • 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
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0
When To Use
Examples
base
With Icon
other status
custom status render
Custom Render Type
Custom Size
Custom Color
Download QRCode
Error Level
Advanced Usage
API
StatusRenderInfo
Design Token
FAQ
About QRCode ErrorLevel
⚠️⚠️⚠️ Cannot scan the QR code?

QRCode

Components that can convert text into QR codes, and support custom color and logo.
Importimport { QRCode } from "antd";
Sourcecomponents/qr-code
Docs
Edit this pageChangelog
Versionsupported since 5.1.0
contributors
  • PopoverSegmented

    Resources

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

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    When To Use

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

    Examples

    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 sizenumber160
    iconSizeinclude image sizenumber | { width: number; height: number }405.19.0
    colorQRCode Colorstring#000
    bgColorQRCode Background Colorstringtransparent5.5.0
    borderedWhether has border stylebooleantrue
    errorLevelError Code Level'L' | 'M' | 'Q' | 'H' M
    statusQRCode statusactive | expired | loading | scannedactivescanned: 5.13.0
    statusRendercustom status render(info: \[StatusRenderInfo](/components/qr-code-cn#statusrenderinfo)) => React.ReactNode5.20.0
    onRefreshcallback() => void-

    StatusRenderInfo

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

    base

    Basic Usage.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    other status

    The status can be controlled by the value status, four values ​​of active, expired, loading, scanned are provided.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Custom Render Type

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

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Custom Color

    Custom Color.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Error Level

    set Error Level.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    With Icon

    QRCode with Icon.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    custom status render

    You can control the rendering logic of the QR code in different states through the value of statusRender.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    5.20.0
    Custom Size

    Custom Size.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Download QRCode

    A way to download QRCode.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Advanced Usage

    With Popover.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code

    QR code expired

    Scanned

    Loading...

    QR code expired

    Scanned