Bridge Context

Import from @workspace/bridge-react/bridge-context/bridge-provider, @workspace/bridge-react/bridge-context/use-bridge-engine, or @workspace/bridge-react/bridge-context/with-bridge-context.

The bridge context module provides the top-level provider and hook for configuring the bridge engine (rules variant, locale, and notation).

BridgeProvider

Wraps your application to provide the bridge engine context to all child components.

The variant is derived from the teachingMode in the context. Locale controls notation parsing/formatting and defaults to "fr" if not specified.

import { BridgeProvider } from '@workspace/bridge-react/bridge-context/bridge-provider';

function App() {
  return (
    <BridgeProvider context={{ teachingMode: "auction", locale: "en" }}>
      {/* All bridge components can now access the engine */}
    </BridgeProvider>
  );
}

With explicit context

import { BridgeProvider } from '@workspace/bridge-react/bridge-context/bridge-provider';
import type { BridgeContext } from '@workspace/bridge-core';

const context: BridgeContext = {
  teachingMode: 'auction',
  locale: 'fr',
};

<BridgeProvider context={context}>
  {/* Engine is created from the given context */}
</BridgeProvider>

useBridgeEngine

Hook to access the BridgeEngine instance. Uses three-tier resolution:

Component prop — if a context prop is passed, creates a local engine
Provider context — uses the engine from the nearest BridgeProvider
Default fallback — creates an engine with the classic variant

import { useBridgeEngine } from '@workspace/bridge-react/bridge-context/use-bridge-engine';

function MyComponent() {
  const engine = useBridgeEngine();
  const isValid = engine.auction.isBidValid(sequence, bid);
}

Higher-order component that adds an optional context prop to any component. When context is provided, the component is wrapped in a local BridgeProvider — even if a parent provider already exists. This enables per-component context override.

All exported components that use the engine internally are already wrapped with withBridgeContext. You don't need to apply it yourself unless building custom components.

Prop

Type

How It Works

import { SuitDisplay } from '@workspace/bridge-react/suit/suit-display';

// 1. No provider, no context → uses default engine (classic variant)
<SuitDisplay suit="S" />

// 2. Inside a provider → uses the provider's engine
<BridgeProvider context={{ teachingMode: 'auction', locale: 'fr' }}>
  <SuitDisplay suit="S" />
</BridgeProvider>

// 3. With context prop → creates a local provider (overrides parent)
<BridgeProvider context={{ teachingMode: 'auction', locale: 'fr' }}>
  <SuitDisplay suit="S" context={{ teachingMode: 'petit-bridge' }} />
</BridgeProvider>

Custom Components

To wrap your own component:

import { withBridgeContext } from '@workspace/bridge-react/bridge-context/with-bridge-context';
import { useBridgeEngine } from '@workspace/bridge-react/bridge-context/use-bridge-engine';

function MyComponentInner({ title }: { title: string }) {
  const engine = useBridgeEngine();
  return <div>{engine.notation.formatRank('K')}: {title}</div>;
}

export const MyComponent = withBridgeContext(MyComponentInner);
// MyComponent now accepts { title: string; context?: BridgeContext }

useVariant

Hook that returns the current SuitVariant from the bridge engine context. A shorthand for useBridgeEngine().teaching.variant.

Import from @workspace/bridge-react/bridge-context/useVariant.

import { useVariant } from '@workspace/bridge-react/bridge-context/useVariant';

function MyComponent() {
  const variant = useVariant();
  // variant: "classic" | "petit-bridge"
}

BridgeProvider

Props

With explicit context

useBridgeEngine

withBridgeContext

How It Works

Custom Components

useVariant

On this page