QRCode

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.

TypeScript
JavaScript
import React from 'react';
import { QRCode } from 'antd';

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

export default App;

other status

The status can be controlled by the value status.

TypeScript
JavaScript
import React from 'react';
import { QRCode, Space } from 'antd';

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 Color

Custom Color.

TypeScript
JavaScript
import React from 'react';
import { QRCode, Space, theme } from 'antd';

const { useToken } = theme;

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

export default App;

Error Level

set Error Level.

TypeScript
JavaScript
import React, { useState } from 'react';
import type { QRCodeProps } from 'antd';
import { Segmented, QRCode } from 'antd';

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;

With Icon

QRCode with Icon.

TypeScript
JavaScript
import React from 'react';
import { QRCode } from 'antd';

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

export default App;

Custom Size

Custom Size.

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

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.

TypeScript
JavaScript
import React from 'react';
import { QRCode, Button } from 'antd';

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.

TypeScript
JavaScript
import React from 'react';
import { QRCode, Popover } from 'antd';

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;

API

This component is available since antd@5.1.0

Property	Description	Type	Default
value	scanned text	string	-
icon	include image url (only image link are supported)	string	-
size	QRCode size	number	128
iconSize	include image size	number	32
color	QRCode Color	string	`#000`
bordered	Whether has border style	boolean	`true`
errorLevel	Error Code Level	`'L' \| 'M' \| 'Q' \| 'H'`	`M`
status	QRCode status	`active \| expired \| loading`	`active`
onRefresh	callback	`() => 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

import React from 'react'; import { QRCode, Space } from 'antd'; 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;

import React from 'react'; import { QRCode, Space, theme } from 'antd'; const { useToken } = theme; const App: React.FC = () => { const { token } = useToken(); return ( <Space> <QRCode value="https://ant.design/" color={token.colorSuccessText} style={{ marginBottom: 16, backgroundColor: token.colorBgLayout }} /> <QRCode value="https://ant.design/" color={token.colorInfoText} style={{ marginBottom: 16, backgroundColor: token.colorBgLayout }} /> </Space> ); }; export default App;

import React, { useState } from 'react'; import type { QRCodeProps } from 'antd'; import { Segmented, QRCode } from 'antd'; 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;

import React from 'react'; import { QRCode } from 'antd'; const App: React.FC = () => ( <QRCode errorLevel="H" value="https://ant.design/" icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" /> ); export default App;

import React, { useState } from 'react'; import { MinusOutlined, PlusOutlined } from '@ant-design/icons'; import { QRCode, Button } from 'antd'; 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;

import React from 'react'; import { QRCode, Button } from 'antd'; 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;

API

This component is available since antd@5.1.0

Property	Description	Type	Default
value	scanned text	string	-
icon	include image url (only image link are supported)	string	-
size	QRCode size	number	128
iconSize	include image size	number	32
color	QRCode Color	string	`#000`
bordered	Whether has border style	boolean	`true`
errorLevel	Error Code Level	`'L' \| 'M' \| 'Q' \| 'H'`	`M`
status	QRCode status	`active \| expired \| loading`	`active`
onRefresh	callback	`() => 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.

Ant Design

QRCode

Ant Design

QRCode

When To Use

Examples

API

FAQ

About QRCode ErrorLevel

When To Use

Examples

API

FAQ

About QRCode ErrorLevel