Compound Components

Build custom layouts by composing Board, MoveHistory, Navigation, and BoardControls independently within a ChessProvider. Each component reads from shared context.

Layout 1

Side-by-Side

Board and move history displayed horizontally with controls spanning below.

import {
  ChessProvider, Board,
  MoveHistory, Navigation, BoardControls,
} from "@mdwebb/react-chess";

<ChessProvider pgn={pgn} theme="blue">
  <div style={{
    display: "grid",
    gridTemplateColumns: "450px 1fr",
    gridTemplateRows: "450px auto",
    gap: "1rem",
  }}>
    <Board width={450} height={450} />
    <MoveHistory />
    <div style={{ gridColumn: "1 / -1" }}>
      <Navigation />
      <BoardControls />
    </div>
  </div>
</ChessProvider>

Layout 2

Stacked Vertical

Everything stacked vertically — perfect for narrow containers or mobile.

<ChessProvider pgn={pgn} theme="green">
  <div style={{ maxWidth: "450px" }}>
    <Board width={450} height={450} />
    <Navigation />
    <BoardControls />
    <div style={{ height: "200px" }}>
      <MoveHistory />
    </div>
  </div>
</ChessProvider>

Layout 3

Board Only

Minimal — just the board, nothing else. Use the ref for programmatic control.

// Board-only — no history panel, just the board
<ChessProvider theme="gray">
  <Board width={300} height={300} />
</ChessProvider>