menu

hide

onClick (optional)

Called when the user clicks a chessboard cell.

Returns the clicked cell data and its position on the board.

Typing

type ClickData = {
    cellData: {
        figure: { 
            color: "white" | "black";
            type: "pawn" | "bishop" | "knigts" | "rook" | "queen" | "king";
        } | undefined;
    };
    pos: [number, number];
}

type onClick = (data: ClickData) => void;

Code

export const App = () => {
    const handleClick = (data) => {
        console.log(data.cellData, data.pos);
    }

    return (
        <ChessBoard
            FEN="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
            onChange={handleChange}
            onEndGame={handleEndGame}
            onClick={handleClick}
        />
    );
}