React Chessboard UI

v
menu
hide

arrows (optional)

Renders arrows on the chessboard.

If an arrow does not have a color, the chessboard uses config.arrowColor or the default arrow color.

Example


Typing

type Arrow = {
    start: number;
    end: number;
    color?: string;
}

type arrows = Arrow[];

Code

export const App = () => {
    const arrows = [
        { start: [4, 6], end: [4, 4] },
        { start: [4, 1], end: [4, 3], color: "#f97316" },
        { start: [6, 7], end: [5, 5], color: "#5a16f9" },
        { start: [1, 0], end: [2, 2], color: "#16f943" },
    ];

    return (
        <ChessBoard
            FEN="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
            onChange={handleChange}
            onEndGame={handleEndGame}
            arrows={arrows}
            config={{
                arrowColor: "#2563eb",
            }}
        />
    );
}