logoMogu Design

⌘ K
  • Design
  • Development
  • Components
  • Components Overview
  • General
    • Button
    • 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
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
base
With Icon
other status
Custom Render Type
Custom Size
Custom Color
Download QRCode
Error Level
Advanced Usage
API
FAQ
About QRCode ErrorLevel

QRCode

PopoverSegmented

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

API

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-

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

base

Basic Usage.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { QRCode } from 'mogud';

const App: React.FC = () => <QRCode value="https://ant.design/" />;

export default App;
other status

The status can be controlled by the value status.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { QRCode, Space } from 'mogud';

const App: React.FC = () => (
  <Space wrap>
    <QRCode value="https://ant.design/" status="loading" />
    <QRCode value="https://ant.design/" status="expired" onRefresh={() => console.log('refresh')} />
  </Space>
);

export default App;
Custom Size

Custom Size.

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { QRCode, Button } from 'mogud';

const App: React.FC = () => {
  const [size, setSize] = useState<number>(160);

  const increase = () => {
    setSize((prevSize) => {
      const newSize = prevSize + 10;
      if (newSize > 300) {
        return 300;
      }
      return newSize;
    });
  };

  const decline = () => {
    setSize((prevSize) => {
      const newSize = prevSize - 10;
      if (newSize < 48) {
        return 48;
      }
      return newSize;
    });
  };

  return (
    <>
      <Button.Group style={{ marginBottom: 16 }}>
        <Button onClick={decline} disabled={size <= 48} icon={<MinusOutlined />}>
          Smaller
        </Button>
        <Button onClick={increase} disabled={size >= 300} icon={<PlusOutlined />}>
          Larger
        </Button>
      </Button.Group>
      <QRCode
        errorLevel="H"
        size={size}
        iconSize={size / 4}
        value="https://ant.design/"
        icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
      />
    </>
  );
};

export default App;
Download QRCode

A way to download QRCode.

expand codeexpand code
TypeScript
JavaScript
import { Button, QRCode } from 'mogud';
import React from 'react';

const downloadQRCode = () => {
  const canvas = document.getElementById('myqrcode')?.querySelector<HTMLCanvasElement>('canvas');
  if (canvas) {
    const url = canvas.toDataURL();
    const a = document.createElement('a');
    a.download = 'QRCode.png';
    a.href = url;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
};

const App: React.FC = () => (
  <div id="myqrcode">
    <QRCode value="https://ant.design/" style={{ marginBottom: 16 }} />
    <Button type="primary" onClick={downloadQRCode}>
      Download
    </Button>
  </div>
);

export default App;
Advanced Usage

With Popover.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { QRCode, Popover } from 'mogud';

const src = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg';

const App: React.FC = () => (
  <Popover overlayInnerStyle={{ padding: 0 }} content={<QRCode value={src} bordered={false} />}>
    <img width={100} height={100} src={src} alt="icon" />
  </Popover>
);

export default App;
With Icon

QRCode with Icon.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { QRCode } from 'mogud';

const App: React.FC = () => (
  <QRCode
    errorLevel="H"
    value="https://ant.design/"
    icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
  />
);

export default App;
Custom Render Type

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

expand codeexpand code
TypeScript
JavaScript
import { QRCode, Space } from 'mogud';
import React from 'react';

const App: React.FC = () => (
  <Space>
    <QRCode type="canvas" value="https://ant.design/" />
    <QRCode type="svg" value="https://ant.design/" />
  </Space>
);

export default App;
Custom Color

Custom Color.

expand codeexpand code
TypeScript
JavaScript
import { QRCode, Space, theme } from 'mogud';
import React from 'react';

const { useToken } = theme;

const App: React.FC = () => {
  const { token } = useToken();
  return (
    <Space>
      <QRCode value="https://ant.design/" color={token.colorSuccessText} />
      <QRCode
        value="https://ant.design/"
        color={token.colorInfoText}
        bgColor={token.colorBgLayout}
      />
    </Space>
  );
};

export default App;
Error Level

set Error Level.

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import type { QRCodeProps } from 'mogud';
import { Segmented, QRCode } from 'mogud';

const App: React.FC = () => {
  const [level, setLevel] = useState<string | number>('L');
  return (
    <>
      <QRCode
        style={{ marginBottom: 16 }}
        errorLevel={level as QRCodeProps['errorLevel']}
        value="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
      />
      <Segmented options={['L', 'M', 'Q', 'H']} value={level} onChange={setLevel} />
    </>
  );
};

export default App;

二维码过期

icon