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
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
fen | string | Yes* | N/A | The position, as a whole FEN record or just its piece placement |
material | BoardMaterial | Yes* | N/A | Each side's material, as materialOf counts it (used over fen) |
captured | boolean | No | false | Draw 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" | No | The side to move | The side a board beside it has at the bottom, which the strip lists last |
width | number | No | Its measured width | How wide the strip is, when your layout already knows |
label | string | No | "Material" | What screen readers announce |
* Pass either fen or material.
Examples
Starting Position
One Player Ahead
The side that is ahead has its lead printed after its points.
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.
Sizes
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.
Too Narrow for the Pieces
When the strip is too narrow for every piece, each side shows its king and its points alone.
See Also
- ChessBoard - The position itself, and
materialOf - StatGroup - Labelled figures in a row