Skip to content

react-cards-opening

Labels and translation

No sentence is hard coded where you cannot reach it. CardHunt and CardOpening take a labels object, and anything you leave out keeps its English default. Lines that depend on the state of the hunt are functions, so a translation can count and pluralise its own way.

Override a few

tsx

<CardHunt
  labels={{
    scan: ({ found }) => (found > 0 ? "Weiter suchen" : "Suchen"),
    openAll: "Alle finden",
    replay: "Noch einmal",
    hidden: "Noch versteckt",
    found: (where) => `Gefunden: ${where}`,
  }}
  {...rest}
/>

All of them

Label	Type	Default
`headline`	`(state) => string`	"5 cards are hiding in here." and its variants
`subline`	`(state) => string`	"Run the scan. Each card opens where the beam finds it."
`scan`	`(state) => string`	"Scan", then "Keep scanning"
`openAll`	`string`	"Find all"
`replay`	`string`	"Scan again"
`hidden`	`string`	"Still hidden"
`finds`	`string`	"Your finds" (read by screen readers)
`openCard`	`(name) => string`	"Open Night Owl" (a found cell)
`openBadge`	`string`	"Open this card" (a badge's tooltip)
`found`	`(where) => string`	"Found on row 3, column 12"
`turnCard`	`string`	"Turn the card over, then keep it"
`turnCardHint`	`string`	"Click to turn it over, click again to keep it"
`closeCard`	`string`	"Close this card"
`closeCardHint`	`string`	"Click to close"

The state a line is written from

ts

interface HuntState {
  total: number; // cards in the deal
  found: number; // opened so far
  pending: number; // still hidden
  left: number; // still to come in this scan, after the one on screen
  running: boolean;
  replay: boolean;
  hero: boolean;
}

The rest of the words

Tier names are the label of each tier. Translate them in your tier list.
Where a card was found comes from describeSpot. Format a date there in the reader's locale.
Card names and text are your data.

tsx

import { CARD_HUNT_LABELS } from "@react-cards-opening/ui";

// Start from the defaults when only the wording around them changes.
const labels = { ...CARD_HUNT_LABELS, replay: "Run it back" };

Last updated 2026-10-11. Read this page as Markdown.

From Hype StackShip faster with Hype StackStop building from scratch. A free React and Hono template, with features written into your repo by one CLI command.Full-stack TypeScriptAuth, billing and teams built inCode you own, no lock-inFree MIT templateExplore the stack