Components that can convert text into QR codes, and support custom color and logo. Available since antd@5.1.0.
Used when the text needs to be converted into a QR Code.
Basic Usage.
import React from 'react';
import { QRCode } from 'antd';
const App: React.FC = () => <QRCode value="https://ant.design/" />;
export default App;
The status can be controlled by the value status.
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.
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;
set Error Level.
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;
QRCode with Icon.
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.
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;
A way to download QRCode.
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;
With Popover.
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;
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 | - |
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
