How to match multiple things?

[yamcodes]

Hey team, this is a great lib I use all the time.

I wonder how to match multiple results, e.g. in a hangman game:

{match<number, ReactNode>(limbsCount)
          .when(gte(1), () => <Head />)
          .when(gte(2), () => <div>body</div>)
          .when(gte(3), () => <LeftArm />)
          .when(gte(4), () => <RightArm />)
          .when(gte(5), () => <LeftLeg />)
          .when(gte(6), () => <RightLeg />)
          .otherwise(() => null)}

I'd like to display the full hangman when it's gte(6), but since the match is exclusive, it is only displaying the head.

Is this possible to achieve with ts-pattern?

[agammann]

A single match returns its first matching branch. To accumulate parts, match each part independently (or use ordinary conditionals). For example:

import { match } from 'ts-pattern';

function Hangman({ limbsCount }: { limbsCount: number }) {
  const parts = ['head', 'body', 'left arm', 'right arm', 'left leg', 'right leg'];
  return <>{parts.map((part, index) => match(limbsCount)
    .when(n => n >= index + 1, () => <span key={part}>{part}</span>)
    .otherwise(() => null))}</>;
}

Replace the sample spans with your Head, body, arm, and leg components. With limbsCount = 3, the first three parts render; with 6, all six render. Reversing the original predicates alone would only choose a different single branch.

Tested the exact component with ts-pattern 5.9.0, TypeScript 5.9.3 and React 18.2.0: counts 0 through 6 rendered the expected accumulated parts. First matching branch.