Skip to main content

MaterialStrip

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

What each side has on the board, drawn as the pieces themselves: grouped by kind from king to pawn, with the points they add up to and a "+3" beside the side that is ahead. The pieces are the same outlined and solid glyphs ChessBoard draws, so the strip reads as part of the board beside it.

Import​

import { MaterialStrip } from "~lib/data-display/chess-board";

Props​

NameTypeRequiredDefaultDescription
fenstringYes*N/AThe position, as a whole FEN record or just its piece placement
materialBoardMaterialYes*N/AEach side's material, as materialOf counts it (used over fen)
capturedbooleanNofalseDraw the pieces each side has taken instead of the ones it keeps
size"sm" | "md" | "lg"No"md"Size of the pieces and the points
direction"row" | "column"No"row"Both sides on one line, or one above the other
orientation"white" | "black"NoThe side to moveThe side a board beside it has at the bottom, which the strip lists last
widthnumberNoIts measured widthHow wide the strip is, when your layout already knows
labelstringNo"Material"What screen readers announce

* Pass either fen or material.

Examples​

Starting Position​

Open Starting Position in Storybook

One Player Ahead​

The side that is ahead has its lead printed after its points.

Open One Player Ahead in Storybook

Captured Pieces​

Set captured to show the pieces each side has taken, the way a chess clock does. White's line shows the black pieces White has taken.

Open Captured in Storybook

Sizes​

Open Small in Storybook
Open Large in Storybook

Beside the Board​

Set direction="column" for a narrow column beside the board. The sides are listed in the order the board shows them, top to bottom, so pass the strip the same fen (and orientation) as the board.

Open Beside The Board in Storybook

Too Narrow for the Pieces​

When the strip is too narrow for every piece, each side shows its king and its points alone.

Open Too Narrow For The Pieces in Storybook

See Also​