QR Code Scanner
A drop zone that reads a QR code from an image in the browser, with copy and open-link actions.
Codes found: 0
Installation
pnpm dlx shadcn@latest add https://qrdx.dev/r/qr-code-scanner.jsonUsage
import { QrCodeScanner } from "@/components/qr-code-scanner";<QrCodeScanner onResult={(value) => console.log(value)} />People drop an image or click to pick one. Decoding runs in the browser with qrdx's detection helpers, so the image never leaves the device. It reads image files, not a live camera feed.
The result appears with a copy button, plus an "Open link" button when it is an http or https URL.
Examples
Checking a result
onResult receives the decoded text, so you can act on it, for example to check in a ticket. label changes the heading in the drop zone. Download the sample code above and drop it in to see a valid ticket.
API Reference
Prop
Type
Any other prop, such as className, is passed to the wrapping <div>.
Last updated on