React Chessboard UI

v
menu
hide

onChange

Called during the update of the state of the chessboard.

Returns the updated state of the chessboard in FEN notation, indicating the move that was made and the piece that was moved.


Typing

type MoveData = {
    FEN: string;
    from: [number, number];
    to: [number, number];
    figure: { 
        color: "white" | "black";
        type: "pawn" | "bishop" | "knigts" | "rook" | "queen" | "king";
    };
}

type onChange = (moveData: MoveData) => void;

Code

export const App = () => {
    const handleChange = (moveData) => {
        sendMove(moveData);
    }

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