Overview

@workspace/bridge-react provides domain-specific React components for building bridge game interfaces. Components are organized into sub-path exports by domain module.

Quick Start

import { BridgeProvider } from '@workspace/bridge-react/bridge-context/bridge-provider';
import { SuitDisplay } from '@workspace/bridge-react/suit/suit-display';
import { CardDisplay } from '@workspace/bridge-react/card/card-display';

function App() {
  return (
    <BridgeProvider>
      <SuitDisplay suit="S" />
      <CardDisplay card="SA" />
    </BridgeProvider>
  );
}

Sub-path Exports

Architecture

Most display components follow a pattern:

1. BridgeProvider wraps the app to provide engine context (rules + notation)
2. Components use useBridgeEngine() internally for variant-specific rendering (notation, display config)
3. Components that need translations use useTranslation() from react-i18next
4. Compound components (Hand, BiddingTable) provide their own context via a Root component

Package Structure