## QrCode 组件示例
### 基本使用
基本用法。
```tsx
import React from 'react';
import { Input, QRCode, Space } from 'antd';
const App: React.FC = () => {
const [text, setText] = React.useState('https://ant.design/');
return (
setText(e.target.value)}
/>
);
};
export default App;
```
### 带 Icon 的例子
带 Icon 的二维码。
```tsx
import React from 'react';
import { QRCode } from 'antd';
const App: React.FC = () => (
);
export default App;
```
### 不同的状态
可以通过 `status` 的值控制二维码的状态，提供了 `active`、`expired`、`loading`、`scanned` 四个值。
```tsx
import React from 'react';
import { Flex, QRCode } from 'antd';
const value = 'https://ant.design';
const App: React.FC = () => (
console.log('refresh')} />
);
export default App;
```
### 自定义状态渲染器
可以通过 `statusRender` 的值控制二维码不同状态的渲染逻辑。
```tsx
import React from 'react';
import { CheckCircleFilled, CloseCircleFilled, ReloadOutlined } from '@ant-design/icons';
import type { QRCodeProps } from 'antd';
import { Button, Flex, QRCode, Space, Spin } from 'antd';
const value = 'https://ant.design';
const customStatusRender: QRCodeProps['statusRender'] = (info) => {
switch (info.status) {
case 'expired':
return (
{info.locale?.expired}
);
case 'loading':
return (
Loading...
);
case 'scanned':
return (
{info.locale?.scanned}
);
default:
return null;
}
};
const App: React.FC = () => (
console.log('refresh')}
statusRender={customStatusRender}
/>
);
export default App;
```
### 自定义渲染类型
通过设置 `type` 自定义渲染结果，提供 `canvas` 和 `svg` 两个选项。
```tsx
import React from 'react';
import { QRCode, Space } from 'antd';
const App: React.FC = () => (
);
export default App;
```
### 自定义尺寸
自定义尺寸
```tsx
import React, { useState } from 'react';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, QRCode, Space } from 'antd';
const MIN_SIZE = 48;
const MAX_SIZE = 300;
const App: React.FC = () => {
const [size, setSize] = useState(160);
const increase = () => {
setSize((prevSize) => {
const newSize = prevSize + 10;
if (newSize >= MAX_SIZE) {
return MAX_SIZE;
}
return newSize;
});
};
const decline = () => {
setSize((prevSize) => {
const newSize = prevSize - 10;
if (newSize <= MIN_SIZE) {
return MIN_SIZE;
}
return newSize;
});
};
return (
<>
}>
Smaller
);
};
export default App;
```
### 自定义颜色
通过设置 `color` 自定义二维码颜色，通过设置 `bgColor` 自定义背景颜色。
```tsx
import React from 'react';
import { QRCode, Space, theme } from 'antd';
const { useToken } = theme;
const App: React.FC = () => {
const { token } = useToken();
return (
);
};
export default App;
```
### 下载二维码
下载二维码的简单实现。
```tsx
import React from 'react';
import { Button, QRCode, Segmented, Space } from 'antd';
import type { QRCodeProps } from 'antd';
function doDownload(url: string, fileName: string) {
const a = document.createElement('a');
a.download = fileName;
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
const downloadCanvasQRCode = () => {
const canvas = document.getElementById('myqrcode')?.querySelector('canvas');
if (canvas) {
const url = canvas.toDataURL();
doDownload(url, 'QRCode.png');
}
};
const downloadSvgQRCode = () => {
const svg = document.getElementById('myqrcode')?.querySelector('svg');
const svgData = new XMLSerializer().serializeToString(svg!);
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
doDownload(url, 'QRCode.svg');
};
const App: React.FC = () => {
const [renderType, setRenderType] = React.useState('canvas');
return (
);
};
export default App;
```
### 纠错比例
通过设置 errorLevel 调整不同的容错等级。
```tsx
import React, { useState } from 'react';
import type { QRCodeProps } from 'antd';
import { QRCode, Segmented } from 'antd';
const App: React.FC = () => {
const [level, setLevel] = useState('L');
return (
<>
);
};
export default App;
```
### 高级用法
带气泡卡片的例子。
```tsx
import React from 'react';
import { Button, Popover, QRCode } from 'antd';
const App: React.FC = () => (
}>
);
export default App;
```
### 自定义语义结构的样式和类
通过 `classNames` 和 `styles` 传入对象/函数可以自定义 QRCode 的[语义化结构](#semantic-dom)样式。
```tsx
import React from 'react';
import { Flex, QRCode } from 'antd';
import type { QRCodeProps } from 'antd';
import { createStaticStyles } from 'antd-style';
const classNames = createStaticStyles(({ css }) => ({
root: css`
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
`,
}));
const stylesObject: QRCodeProps['styles'] = {
root: {
border: '2px solid #1890ff',
borderRadius: 8,
padding: 16,
backgroundColor: 'rgb(24, 144, 255, 0.1)',
},
};
const stylesFunction: QRCodeProps['styles'] = (info) => {
if (info.props.type === 'canvas') {
return {
root: {
border: '2px solid #ff4d4f',
borderRadius: 8,
padding: 16,
backgroundColor: 'rgba(255, 77, 79, 0.1)',
},
} satisfies QRCodeProps['styles'];
}
};
const App: React.FC = () => {
const sharedProps: QRCodeProps = {
value: 'https://ant.design/',
size: 160,
classNames,
};
return (
);
};
export default App;
```