'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data display
QRCode
A QR code drawn as SVG, with an optional logo.
Ant Design: QRCode
import { QRCode } from '@alea/ui';
Examples
QRCode
Crisp at any size; show the link as text too.
Scan to open
fun.alevasquez.dev
Props
QRCode props
A QR code drawn as SVG, crisp at any size (Ant's QRCode).
| Prop | Type | Default | Description |
|---|---|---|---|
valuerequired | string | - | What the code holds: a URL, text, a Wi-Fi string. |
background | string | '#ffffff' | Background color. Default white. |
color | string | '#111011' | Colors; dark on light reads best. |
label | string | - | Describe what it opens, for screen readers. Default "QR code: " + value. |
level | "L" | "M" | "Q" | "H" | 'M' | Error correction: L, M (default), Q, H. Use H when you put a logo in the middle. |
logo | ReactNode | - | A logo or icon in the middle (use level H). |
size | number | 160 | Size in px. Default 160. |
Accessibility
- An image named after what it opens; show the link as text too.
Do and don't
Do
- Show the link as text next to the code too.
- Keep enough quiet space around it.
Don't
- Don't put it on a busy background.
- Don't make it smaller than 128 px for print.