Boarding Pass

Usage

import { BoardingPass } from '@wdzyi/ui';

<BoardingPass
  flight={flight}
  delayed={status === 'delayed'}
  checkIn={checkIn}
  onCheckInChange={async (next) => {
    setCheckIn(next);
    if (next === 'checking') {
      await checkInPassenger(flight.number);
      setCheckIn('done');
    }
  }}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

flightBoardingPassFlight

Its number and date, where it’s from and to, how long it takes, its times on time and delayed, the gate, seat and zone, and the passenger and cabin. A sample from the Gold Coast to Sydney by default.

delayed, defaultDelayedboolean = false

Delayed, when you hold the status, or where it starts when the pass holds it.

onDelayedChange(delayed: boolean) => void

Called with the other status when the badge is pressed.

checkIn, defaultCheckIn'idle' | 'checking' | 'done' = 'idle'

Where check-in is, when you hold it, or where it starts when the pass holds it. Holding it, move it on to done once checking in has worked.

onCheckInChange(checkIn: BoardingPassCheckIn) => void

Called with checking when Check in is pressed, and idle when Checked in is. Left to itself, the pass moves on to done 1.6s later, as a stand-in.

detailsboolean = true

Shows the gate, the seat, when it boards and the zone. Off, the pass is shorter.

classNamestring

Added to the pass. It’s 320px wide at most, and narrows with the space it’s in.

Notes

• Adapted from Jakub Antalik’s Boarding Pass Check-in on the transitions.dev community, with its timings, its tear line and its 24px corners kept.
• Changing the status sends its word 4px up into a 2px blur and brings the new one up from below, 150ms each way, and pops the times: from the first digit that changed, each rises 8px on a 500ms spring, the last two 70ms and 140ms behind.
• Check in keeps the letters its labels share and cross-blurs the rest in 180ms while its width eases over 240ms. The spinner and the tick swap in 250ms from a quarter of their size, in a slot that opens over 300ms, and the foil drains off in 250ms as it settles on a plate.
• The status and Check in are real buttons, and a screen reader hears the new status with its departure time, then Checking in and Checked in, as it sends success. The round notches either end of the tear line are painted in the page’s colour, so they read as bites out of the ticket: set --boarding-pass-notch to the colour behind it if that isn’t the page.
• With reduced motion, the words and times change in place, nothing presses in, and the spinner turns at half the speed.