QR Code API

API reference docs for theQR Codecomponent. For examples and details on the usage of this component, visit the component demo page.

Props​

QrCode Component​

PropTypeDescriptionDefault
valuestringThe data to encode in the QR code (URL, text, email, phone, etc.)._
size?64 | 120 | 160The size of the QR code in pixels.120
errorLevel?'L' | 'M' | 'Q' | 'H'Error correction level. L = ~7%, M = ~15%, Q = ~25%, H = ~30% recovery.'L'
ref?React.Ref<SVGSVGElement>Ref to the SVG element for direct access (e.g., for download functionality)._

useQRCode Hook​

Hook-based API for custom layouts and advanced functionality.

const { containerProps, svgProps, downloadAsPng } = useQRCode(options);

Parameters​

OptionTypeDescriptionDefault
valuestringThe data to encode in the QR code._
size?64 | 120 | 160The size of the QR code in pixels.120
errorLevel?'L' | 'M' | 'Q' | 'H'Error correction level for data recovery.'L'
ref?React.Ref<SVGSVGElement>Ref to the SVG element._

Return Value​

PropertyTypeDescription
containerPropsBoxPropsProps to spread on the outer Box component.
svgPropsBoxProps & SVGAttributesProps to spread on the SVG Box component (use as="svg").
downloadAsPng(options?) => Promise<void>Function to download the QR code as PNG image.

downloadAsPng Options​

OptionTypeDescriptionDefault
filename?stringName of the downloaded file.'qr-code.png'
imageSize?numberSize in pixels for the PNG image.size * 4