Skip to content

react-cards-opening

useCardPack

useCardPack is a pack of cards without a look. Where useCardOpening shows one card at a time, a pack puts every card on the table at once and lets the viewer turn them over in any order. The hook keeps the stage and which cards are up. CardPack is this hook with a table drawn around it.

Usage

tsx

import { useCardPack, useOpenedCards } from "@react-cards-opening/core";

function Pack({ cards }) {
  const { opened, open } = useOpenedCards("pack:42");
  const pack = useCardPack({ cards, opened, onOpen: open });

  if (pack.stage === "sealed") return <button onClick={pack.tear}>Open the pack</button>;

  return (
    <>
      {cards.map((card) => (
        <button key={card.id} onClick={() => pack.flip(card.id)}>
          {pack.isUp(card.id) ? card.name : "?"}
        </button>
      ))}
      {pack.allUp && pack.stage === "dealt" ? <button onClick={pack.finish}>Done</button> : null}
    </>
  );
}

The three stages

Stage	What is on the table	How it moves on
`sealed`	The pack, unopened.	`tear()` deals the cards face down.
`dealt`	Every card, face down until turned.	`flip(id)` turns one. `finish()` works once all are up.
`done`	Every card, face up and gathered.	`reset()` seals the pack to deal the same cards again.

The stage a pack starts in follows from opened. None of its cards opened is a sealed pack. Some of them is a pack somebody walked away from: it comes back dealt, with those cards up. All of them is done.

What it answers

Field	Type	What it is
`stage`	`"sealed" \| "dealt" \| "done"`	Where the pack is.
`isUp`	`(id: string) => boolean`	Whether a card is face up.
`left`	`readonly C[]`	Cards still face down.
`allUp`	`boolean`	Every card is turned: the pack can be finished.
`replay`	`boolean`	This deal is a replay: turning cards opens nothing.
`tear`	`() => void`	Opens the sealed pack.
`flip`	`(id: string) => void`	Turns one card over. Ignored unless the pack is dealt and the card is down.
`finish`	`() => void`	Gathers the cards up. Ignored until every card is turned.
`reset`	`() => void`	Seals the pack again.

Replays

onOpen is called once a card, the first time it is turned. After reset, the same cards are dealt face down again and replay is true: they can be turned over to watch, and nothing is opened twice.

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