Invoice Lottery Checker (React)

Taiwan's uniform-invoice lottery draws every two months, and checking receipts is a national pastime. This component packages "period title + 8-cell digit input + result panel" into a self-contained checker: the winning numbers come in through prizes, and the built-in matchInvoice() applies the Ministry of Finance's published prize rules to decide the special prize, grand prize, the first-prize family (last 8 down to last 3 digits) and the additional sixth prize. It also supports a quick last-3-digits mode (which can only settle the sixth / additional sixth prize and prompts for the full number to confirm anything higher). On a win, confetti particles burst, the prize amount rolls up and a prize badge appears; on a miss you get a gentle head-shake and a "check the next one" button. The digit cells are OTP-style: auto-advance, paste distribution, inputMode="numeric", Backspace to step back.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<InvoiceLotteryChecker />

Installation

Usage

import {
  InvoiceLotteryChecker,
  matchInvoice,
} from "@/components/ui/invoice-lottery-checker";

// Sample prize numbers, not a real draw — feed real ones from your backend or the Ministry of Finance open data in production
const prizes = {
  special: "13579246",
  grand: "24680135",
  first: ["11223344", "55667788", "99001122"],
  additionalSixth: ["357", "802"],
};

<InvoiceLotteryChecker
  prizes={prizes}
  period="115 年 5–6 月"
  onResult={(result, number) =>
    console.log(number, result.prize, result.amount)
  }
  note="示範獎號，非真實開獎結果"
/>

// The matcher can be used on its own (for example to check a whole stack of receipts in a batch)
matchInvoice("10203788", prizes); // { prize: "sixth", amount: 200, matchedDigits: 3, partial: false }
matchInvoice("788", prizes);      // { prize: "sixth", amount: 200, matchedDigits: 3, partial: true }

Props

InvoicePrizes

InvoiceMatchResult

matchInvoice(number, prizes), sanitizeInvoiceNumber(raw, maxLength?), INVOICE_PRIZE_LABELS (Chinese prize names), INVOICE_PRIZE_AMOUNTS (amount per tier) and the InvoicePrizeTier type are also named exports, so the same rules can be reused at the form layer or for batch checking.

How it works

• Prize rules: special prize, all 8 digits, NT$10,000,000; grand prize, all 8 digits, NT$2,000,000; any of the three first-prize numbers — all 8 digits NT$200,000, last 7 NT$40,000, last 6 NT$10,000, last 5 NT$4,000, last 4 NT$1,000, last 3 NT$200 (sixth prize); additional sixth prize, last 3 digits, NT$200. When several tiers apply at once, the highest wins
• With only 3 digits (mode="last3"), only the sixth / additional sixth prize can be settled; the win panel switches to "末三碼相符，請輸入完整號碼確認更高獎項" (last three digits match — enter the full number to confirm a higher prize) and onResult receives partial: true
• The result panel is shown only while the number still equals the one that was checked: as soon as the user hits Backspace it collapses; under autoCheck a given complete number is checked once, and only re-checked after being edited and completed again
• The confetti is implemented in-house with small motion squares and depends on no other component; every piece's landing spot, rotation and size come from a deterministic pseudo-random function, so Math.random is never called during render and SSR and CSR output match
• In 8-digit mode the last three cells are set slightly apart and the last three digits of each first-prize number are bolded in the list — that is what decides the sixth prize, so it can be checked at a glance
• No real winning numbers are built in: in production, feed prizes from your backend or the Ministry of Finance open data; the demo and playground use fictional numbers only and label them via note

Accessibility

• The real input is carried by a single native input (inputMode="numeric", pattern="[0-9]*", maxLength); the visual cells are presentational only and marked aria-hidden, so keyboard behavior and the mobile numeric keypad behave exactly like an ordinary input; the label is bound with htmlFor
• The result lives in a role="status" + aria-live="polite" region, so the tier, amount and hint are read out by screen readers; the input points at that region through aria-describedby
• The "對獎" (check) and "再對下一張" (check the next one) buttons are type="button" with focus-visible rings; Enter triggers a manual check, and Enter pressed mid-composition in a Chinese IME is ignored (isComposing plus Safari's keyCode 229)
• When the user has "reduce motion" enabled at the system level, the confetti, rolling amount, head-shake, cell pop-in and caret blink animations are disabled and the final result and text are shown directly