Skip to main content

Usage

Integration components and helpers encode values for you. They do not expose raster source size; use width, height, or CSS to control display size. Colors use exact six-digit RGB or eight-digit RGBA hex values. SVG, PNG, and WebP preserve alpha, while JPEG composites transparency onto white.

Props

string
required
The value prop or hook argument is the text or URL to encode. It must be valid UTF-8 containing 1-512 bytes.
Values may appear in logs and public, cacheable URLs. Do not use sensitive information.
"svg" | "jpg" | "png" | "webp"
default:"svg"
The format prop or option selects the image encoding. React does not expose raster source size; width, height, and CSS only control display size.
boolean
default:"true"
The quietZone prop or option includes the recommended clear space around the QR modules. Set it to false only when the surrounding layout supplies that space.
string
default:"#000000ff"
The foreground prop or option sets the QR module color in exact #rrggbb or #rrggbbaa format.
string
default:"#00000000"
The background prop or option sets the QR background color in exact #rrggbb or #rrggbbaa format.