react-chessboard-ui 2.8.0 → 2.10.0

package/README.md

@@ -3,9 +3,14 @@
 [![NPM](https://img.shields.io/npm/v/react-chessboard-ui.svg)](https://www.npmjs.com/package/react-chessboard-ui)
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-A lightweight and customizable React chessboard component built with modern UI in mind. Easily integrate chess functionality into your React apps with FEN support, game-end detection, and position handling.
+<p align="center">
+  <img src="./blob/default.png?raw=true" width="23%" alt="Default react-chessboard-ui board" />
+  <img src="./blob/customization.png?raw=true" width="23%" alt="Customized react-chessboard-ui board" />
+  <img src="./blob/colorfull_arrows.png?raw=true" width="23%" alt="React chessboard with colorful arrows" />
+  <img src="./blob/all_queens.png?raw=true" width="23%" alt="React chessboard with custom pieces" />
+</p>
 
-<img src="./blob/ChessBoard.png?raw=true" width="400px" alt="react-chessboard-ui preview" />
+An all-in-one React chessboard component with both the chess engine and UI included. Drop it into your React app and get a ready-to-use chessboard without wiring up separate chess logic, move validation, or board state tools. Control the board position with simple FEN notation and react to moves or game-end events through callbacks.
 
 ## 📘 **Full documentation**: [https://react-chessboard-ui.dev/](https://react-chessboard-ui.dev/)
 
@@ -14,10 +19,18 @@ A lightweight and customizable React chessboard component built with modern UI i
 ## 🚀 Features
 
 - 🎯 Fully controlled via FEN strings
+- ♟️ Built-in chess engine and ready-made board UI
+- ✅ Move validation included
 - ♻️ React functional component with hooks support
 - 🎨 Customizable styles (via CSS or override)
 - ♟️ Game-end and move-change callbacks
-- 🧩 Easy integration into any React project
+- 🧩 No extra chess packages or setup required
+
+---
+
+## Why react-chessboard-ui?
+
+`react-chessboard-ui` is designed for developers who need a React chessboard, chess UI, and chess engine in one package. It is not just a board renderer: it provides drag-and-drop chess pieces, FEN-based position control, legal move handling, game-end detection, and customization options out of the box.
 
 ---
 
@@ -46,19 +59,16 @@ import 'react-chessboard-ui/dist/index.css'; // Required CSS
 
 export const App = () => {
   return (
-    <div>
-      <ChessBoard
-        FEN="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
-        onChange={handleChangePosition}
-        onEndGame={handleEndGame}
-      />
-    </div>
+    <ChessBoard
+      FEN="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
+      onChange={handleChangePosition}
+      onEndGame={handleEndGame}
+    />
   );
 };
 ```
 
 ## Full customizable
-<img src="./blob/customization.png?raw=true" width="400px" alt="react-chessboard-ui preview" />
 
 ### 📘 **Documentation for customization**: [https://react-chessboard-ui.dev/properties/config/](https://react-chessboard-ui.dev/properties/config/)
 
@@ -82,4 +92,4 @@ MIT © [react-chessboard-ui](https://github.com/)
 
 ## 🧠 Keywords (for discoverability)
 
-`react` `chess` `chessboard` `react-chess` `chess ui` `react chess component` `fen` `chess game` `react board game`
+`react` `react-chess` `react-chessboard` `react-chessboard-ui` `js-chess` `chess` `chessboard` `chessboard component` `chess engine`

package/dist/ChessBoard/ArrowLayout.d.ts

@@ -5,6 +5,9 @@ declare type ArrowLayoutType = {
     startArrowCoord: CellPos;
     arrowsCoords: ArrowCoords[];
     externalArrowsCoords?: ArrowCoords[];
+    externalArrows?: (ArrowCoords & {
+        color?: string;
+    })[];
     grabbingPos: CellPos;
     boardConfig: ChessBoardConfig;
 };

package/dist/ChessBoard/ChessBoard.d.ts

@@ -1,10 +1,11 @@
 import { PieceColor, GameResult, MoveData, SquarePos } from "../JSChessEngine";
 import { FC } from "react";
-import { ArrowCoords, ChangeMove, ChessBoardConfig } from "./models";
+import { ArrowCoords, ChangeMove, ChessBoardConfig, ClickData } from "./models";
 declare type ChessBoardProps = {
     FEN: string;
     onChange: (moveData: MoveData) => void;
     onEndGame: (result: GameResult) => void;
+    onClick?: (data: ClickData) => void;
     change?: ChangeMove;
     reversed?: boolean;
     config?: Partial<ChessBoardConfig>;
@@ -12,6 +13,9 @@ declare type ChessBoardProps = {
     viewOnly?: boolean;
     moveHighlight?: [SquarePos, SquarePos];
     moveArrows?: ArrowCoords[];
+    arrows?: (ArrowCoords & {
+        color?: string;
+    })[];
 };
 export declare const ChessBoard: FC<ChessBoardProps>;
 export {};

package/dist/ChessBoard/useChessBoardInteractive.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { Cell, CellPos, Figure, FigureColor, GameResult, MoveData } from "../JSChessEngine";
-import { ArrowCoords, ChangeMove, ChessBoardConfig } from "./models";
+import { ArrowCoords, ChangeMove, ChessBoardConfig, ClickData } from "./models";
 declare type UseChessBoardInteractiveProps = {
     config?: Partial<ChessBoardConfig>;
     onChange: (moveData: MoveData) => void;
     onEndGame: (result: GameResult) => void;
+    onClickByChessBoard?: (data: ClickData) => void;
 };
 export declare const useChessBoardInteractive: (props: UseChessBoardInteractiveProps) => {
     fromPos: CellPos;

package/dist/index.js

@@ -2311,7 +2311,8 @@ var ChessBoardControlLayout = function ChessBoardControlLayout(props) {
 var useChessBoardInteractive = function useChessBoardInteractive(props) {
   var config = props.config,
     onChange = props.onChange,
-    onEndGame = props.onEndGame;
+    onEndGame = props.onEndGame,
+    onClickByChessBoard = props.onClickByChessBoard;
   var _useState = React.useState(DEFAULT_CHESSBORD_CONFIG),
     boardConfig = _useState[0],
     setBoardConfig = _useState[1];
@@ -2439,6 +2440,14 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       return !prevReversed;
     });
   };
+  var handleClickByChessBoard = function handleClickByChessBoard(cellData, pos) {
+    if (!onClickByChessBoard) return;
+    onClickByChessBoard({
+      cellData: cellData,
+      pos: pos,
+      currentColor: currentColor
+    });
+  };
   var selectFigureFrom = function selectFigureFrom(cellPos, extActualState) {
     var nowState = extActualState || actualState;
     var cell = nowState[cellPos[1]][cellPos[0]];
@@ -2713,6 +2722,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     if (viewOnly === void 0) {
       viewOnly = false;
     }
+    handleClickByChessBoard(actualState[cellPos[1]][cellPos[0]], cellPos);
     clearMarkedCells();
     clearArrows();
     if (viewOnly) return;
@@ -2963,7 +2973,9 @@ var ArrowLayout = function ArrowLayout(props) {
     grabbingPos = props.grabbingPos,
     boardConfig = props.boardConfig,
     _props$externalArrows = props.externalArrowsCoords,
-    externalArrowsCoords = _props$externalArrows === void 0 ? [] : _props$externalArrows;
+    externalArrowsCoords = _props$externalArrows === void 0 ? [] : _props$externalArrows,
+    _props$externalArrows2 = props.externalArrows,
+    externalArrows = _props$externalArrows2 === void 0 ? [] : _props$externalArrows2;
   return React__default.createElement("div", {
     className: styles.arrowsLayer
   }, startArrowCoord[0] > -1 && grabbingPos[0] > -1 && React__default.createElement(Arrow, {
@@ -2982,6 +2994,12 @@ var ArrowLayout = function ArrowLayout(props) {
     }, coords, {
       color: boardConfig.arrowColor
     }));
+  }), externalArrows.map(function (arrow, i) {
+    return React__default.createElement(Arrow, Object.assign({
+      key: "extArrow_" + i
+    }, arrow, {
+      color: arrow.color || boardConfig.arrowColor
+    }));
   }));
 };
 
@@ -3015,6 +3033,7 @@ var ChessBoard = function ChessBoard(props) {
   var FEN = props.FEN,
     onChange = props.onChange,
     onEndGame = props.onEndGame,
+    onClick = props.onClick,
     change = props.change,
     reversed = props.reversed,
     config = props.config,
@@ -3022,10 +3041,13 @@ var ChessBoard = function ChessBoard(props) {
     viewOnly = props.viewOnly,
     moveHighlight = props.moveHighlight,
     _props$moveArrows = props.moveArrows,
-    moveArrows = _props$moveArrows === void 0 ? [] : _props$moveArrows;
+    moveArrows = _props$moveArrows === void 0 ? [] : _props$moveArrows,
+    _props$arrows = props.arrows,
+    arrows = _props$arrows === void 0 ? [] : _props$arrows;
   var _useChessBoardInterac = useChessBoardInteractive({
       onChange: onChange,
       onEndGame: onEndGame,
+      onClickByChessBoard: onClick,
       config: config
     }),
     fromPos = _useChessBoardInterac.fromPos,
@@ -3071,12 +3093,19 @@ var ChessBoard = function ChessBoard(props) {
     var reversedChange = reversed ? JSChessEngine.reverseMove(change.move) : change.move;
     handleChangeFromExternal(reversedChange, change.withTransition);
   }, [change]);
-  var externalArrows = moveArrows.map(function (arrow) {
+  var DEPRECATED_externalArrows = moveArrows.map(function (arrow) {
     return {
       start: correctGrabbingPosForArrow(arrow.start, boardConfig),
       end: correctGrabbingPosForArrow(arrow.end, boardConfig)
     };
   });
+  var externalArrows = arrows.map(function (arrow) {
+    return {
+      start: correctGrabbingPosForArrow(arrow.start, boardConfig),
+      end: correctGrabbingPosForArrow(arrow.end, boardConfig),
+      color: arrow.color
+    };
+  });
   return React__default.createElement("div", {
     className: styles.chessBoard
   }, React__default.createElement(ChessBoardCellsLayout, {
@@ -3098,7 +3127,8 @@ var ChessBoard = function ChessBoard(props) {
     onHasCheck: getHasCheckByCellPos
   }), React__default.createElement(ArrowLayout, {
     arrowsCoords: arrowsCoords,
-    externalArrowsCoords: externalArrows,
+    externalArrowsCoords: DEPRECATED_externalArrows,
+    externalArrows: externalArrows,
     startArrowCoord: startArrowCoord,
     grabbingPos: correctGrabbingPosForArrow(grabbingCell, boardConfig),
     boardConfig: boardConfig