Contract

Import from @workspace/bridge-react/contract/contract-display, @workspace/bridge-react/contract/contract-label, @workspace/bridge-react/contract/contract-pill, or @workspace/bridge-react/contract/declarer-pill.

ContractDisplay

Shows a contract with level, suit, and doubled/redoubled status.

import { ContractDisplay } from '@workspace/bridge-react/contract/contract-display';

<ContractDisplay contract={{ level: 4, suit: 'S', doubled: 'none', declarer: 'N' }} />
<ContractDisplay contract={{ level: 3, suit: 'NT', doubled: 'X', declarer: 'S' }} />

Demo

object

Props

Prop

Type

ContractLabel

Inline contract display with proper suit symbols. Uses useTranslation() for the "NT" label.

import { ContractLabel } from '@workspace/bridge-react/contract/contract-label';
import { parseContractString } from '@workspace/bridge-core';

const contract = parseContractString('4SX');
if (contract) {
  <ContractLabel contract={contract} />  // Shows "4♠X"
}

Props

Prop

Type

ContractPill

Status pill showing the current contract state with color-coded indicators:

Green — confirmed contract (after 3 passes)
Orange — candidate contract (before 3 passes)
Red — no contract yet

import { ContractPill } from '@workspace/bridge-react/contract/contract-pill';

<ContractPill
  contract={null}
  candidate={{ level: 4, suit: 'S', doubled: 'none', declarer: 'N' }}
  areAuctionsEnabled={true}
/>

Props

Prop

Type

DeclarerPill

Status pill showing the declarer (extracted from the confirmed contract).

import { DeclarerPill } from '@workspace/bridge-react/contract/declarer-pill';

<DeclarerPill
  contract={{ level: 4, suit: 'S', doubled: 'none', declarer: 'N' }}
  areAuctionsEnabled={true}
/>

Props

Prop

Type

Hooks

useContractResult

Hook to get the contract result from a bid sequence.

import { useContractResult } from '@workspace/bridge-react/contract/hooks/use-contract-result';

const { result, declarer, isCandidate } = useContractResult(auctionSequence);
// result?.type === 'confirmed' | 'candidate'
// result?.value is the Contract

Prop

Type

useTrump

Hook to get the trump suit from a bid sequence. Uses the candidate contract if not yet confirmed.

import { useTrump } from '@workspace/bridge-react/contract/hooks/use-trump';

const trump = useTrump(auctionSequence);
// trump = "S" | "H" | "D" | "C" | null

On this page