QR Scanner Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Scan ticket button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same ScanFields component and share the block's state, so a scan made in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

No camera is opened, no microphone and no permission prompt, and the dialog says so under its title. The viewfinder is a drawing, and the code in it is a sample typed in the block. That code is a real QR code, drawn by the catalog component, so a phone pointed at the screen reads the same text the demo does. In your app read frames from a camera stream with a decoder and pass the decoded text to keep; everything after that, the reading, the card and the strip, stays as it is.

readingOf looks at the text. A code that starts with WIFI: is a Wi-Fi code, cut at its semicolons into network, security and password. A web address becomes a link with its host and path. A line shaped like "Ticket 0417: Name, Admission" is a ticket, and anything else is plain text. A link is never followed: Open link says "Not opened in this demo", and a real app should show the host first and ask. A ticket that is not on the list, or is already in, says so and leaves the list alone.

Scan the sample code starts a pass of a little over a second: the line sweeps down once, then the brackets close in on the code and the result card fills. Stop ends the pass early and nothing is read; it is always on the page and quiet until a pass runs. Under reduced motion the line holds still in the middle and the code is read at once. The next press takes the next sample, so the link, the Wi-Fi code and the ticket come round in turn. A polite message says what was read.

Everything. The samples, the guest list and the recent scans are typed constants, the times are minutes on a typed clock, and checking a guest in changes only this page's state. In your app load the guests from your API, send the check-in from finish, and keep the guest's own record as the source for the strip.

Yes. The real dialog is named Scan a ticket, focus starts in the dialog and stays inside until it closes, and Escape and the close button return focus to Scan ticket. The two tabs move with the arrow keys, Enter in the code field reads it, and each recent scan is a button with a full name such as "Ticket, 0388, scanned 10:31". The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus on the button.