react-chessboard-ui 3.0.0 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +131 -45
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,8 +1,12 @@
1
- # react-chessboard-ui ♟️
1
+ # react-chessboard-ui
2
2
 
3
3
  [![NPM](https://img.shields.io/npm/v/react-chessboard-ui.svg)](https://www.npmjs.com/package/react-chessboard-ui)
4
4
  [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
5
5
 
6
+ React chessboard UI with a built-in chess engine, FEN-based state control, legal move handling, drag-and-drop pieces, game-end callbacks, and styling hooks.
7
+
8
+ Use it when you need a playable chessboard in a React app without combining a board renderer, a separate chess engine, and custom move/state glue yourself.
9
+
6
10
  <p align="center">
7
11
  <img src="./blob/default.png?raw=true" width="23%" alt="Default react-chessboard-ui board" />
8
12
  <img src="./blob/customization.png?raw=true" width="23%" alt="Customized react-chessboard-ui board" />
@@ -10,86 +14,168 @@
10
14
  <img src="./blob/all_queens.png?raw=true" width="23%" alt="React chessboard with custom pieces" />
11
15
  </p>
12
16
 
13
- 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.
17
+ ## Documentation
14
18
 
15
- ## 📘 **Full documentation**: [https://react-chessboard-ui.dev/](https://react-chessboard-ui.dev/)
19
+ - Full documentation: [https://react-chessboard-ui.dev/](https://react-chessboard-ui.dev/)
20
+ - Customization docs: [https://react-chessboard-ui.dev/properties/config/](https://react-chessboard-ui.dev/properties/config/)
16
21
 
17
- ---
22
+ ## Features
18
23
 
19
- ## 🚀 Features
24
+ - **Board UI and chess logic in one package**: render the board, validate moves, and receive game events from one component.
25
+ - **FEN-first state**: initialize positions, load puzzles, or render custom board sizes from FEN.
26
+ - **Ready to play**: drag-and-drop pieces, legal move handling, turn switching, callbacks, and game-end detection are included.
27
+ - **Customizable**: override square classes, piece rendering, sizes, highlights, arrows, and interaction behavior.
28
+ - **No required CSS import**: package styles are injected automatically when `ChessBoard` is imported.
20
29
 
21
- - 🎯 Fully controlled via FEN strings
22
- - ♟️ Built-in chess engine and ready-made board UI
23
- - ✅ Move validation included
24
- - ♻️ React functional component with hooks support
25
- - 🎨 Customizable styles (via CSS or override)
26
- - ♟️ Game-end and move-change callbacks
27
- - 🧩 No extra chess packages or setup required
30
+ ## Installation
28
31
 
29
- ---
32
+ ```bash
33
+ npm install react-chessboard-ui
34
+ ```
30
35
 
31
- ## Why react-chessboard-ui?
36
+ ```bash
37
+ yarn add react-chessboard-ui
38
+ ```
32
39
 
33
- `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.
40
+ ## Quick Start
34
41
 
35
- ---
42
+ ```tsx
43
+ import type { FC } from "react";
44
+ import { ChessBoard } from "react-chessboard-ui";
36
45
 
37
- ## 📦 Installation
46
+ export const App: FC = () => {
47
+ return (
48
+ <ChessBoard
49
+ FEN="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
50
+ onChange={(move) => {
51
+ console.log("Move:", move);
52
+ }}
53
+ onEndGame={(result) => {
54
+ console.log("Game ended:", result);
55
+ }}
56
+ />
57
+ );
58
+ };
59
+ ```
38
60
 
39
- Install via npm:
61
+ ## Key Examples
40
62
 
41
- ```bash
42
- npm install react-chessboard-ui
43
- ```
63
+ ### Training Position
44
64
 
45
- Or using yarn:
65
+ ```tsx
66
+ import { ChessBoard } from "react-chessboard-ui";
46
67
 
47
- ```bash
48
- yarn add react-chessboard-ui
68
+ export function TrainingBoard() {
69
+ return (
70
+ <ChessBoard
71
+ FEN="r1bqkbnr/pppp1ppp/2n5/4p3/2B1P3/5N2/PPPP1PPP/RNBQK2R w KQkq - 2 3"
72
+ playerColor="white"
73
+ moveHighlight={[[2, 5], [3, 3]]}
74
+ arrows={[{ start: [2, 5], end: [3, 3], color: "#1d9bf0" }]}
75
+ onChange={(move) => console.log("User move:", move)}
76
+ onEndGame={console.log}
77
+ />
78
+ );
79
+ }
49
80
  ```
50
81
 
51
- ---
82
+ ### Custom Board Size From FEN
52
83
 
53
- ## 💡 Usage Example
84
+ The board size is derived from the FEN rows. This example renders a 12x12 board:
54
85
 
55
86
  ```tsx
56
- import React from 'react';
57
- import { ChessBoard } from 'react-chessboard-ui';
58
- import 'react-chessboard-ui/dist/index.css'; // Required CSS
87
+ import { ChessBoard } from "react-chessboard-ui";
59
88
 
60
- export const App = () => {
89
+ export function CustomSizeBoard() {
90
+ return (
91
+ <ChessBoard
92
+ FEN="qqrnbqkbnrqq/pppppppppppp/12/12/12/12/12/12/12/12/PPPPPPPPPPPP/QQRNBQKBNRQQ w - - 0 1"
93
+ onChange={console.log}
94
+ onEndGame={console.log}
95
+ />
96
+ );
97
+ }
98
+ ```
99
+ <p align="center">
100
+ <img src="./blob/12x12.png?raw=true" width="70%" style="max-width: 450px" alt="Default react-chessboard-ui board" />
101
+ </p>
102
+
103
+ ### Style the Board With CSS Classes
104
+
105
+ ```tsx
106
+ import { ChessBoard } from "react-chessboard-ui";
107
+ import "./board.css";
108
+
109
+ export function StyledBoard() {
61
110
  return (
62
111
  <ChessBoard
63
112
  FEN="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
64
- onChange={handleChangePosition}
65
- onEndGame={handleEndGame}
113
+ config={{
114
+ squareSize: 72,
115
+ pieceSizePercent: 92,
116
+ lightSquareClassName: "light-square",
117
+ darkSquareClassName: "dark-square",
118
+ selectedSquareClassName: "selected-square",
119
+ squareHighlightClassName: "move-highlight",
120
+ }}
121
+ onChange={console.log}
122
+ onEndGame={console.log}
66
123
  />
67
124
  );
68
- };
125
+ }
69
126
  ```
70
127
 
71
- ## Full customizable
128
+ ```css
129
+ .light-square {
130
+ background: #f7f7f2;
131
+ }
72
132
 
73
- ### 📘 **Documentation for customization**: [https://react-chessboard-ui.dev/properties/config/](https://react-chessboard-ui.dev/properties/config/)
133
+ .dark-square {
134
+ background: #9aa77f;
135
+ }
74
136
 
137
+ .selected-square {
138
+ outline: 3px solid #1d9bf0;
139
+ outline-offset: -3px;
140
+ }
75
141
 
76
- ---
142
+ .move-highlight {
143
+ box-shadow: inset 0 0 0 4px rgba(29, 155, 240, 0.35);
144
+ }
145
+ ```
77
146
 
78
- ## 👥 Authors
147
+ ## API Overview
79
148
 
80
- Created by:
149
+ | Prop | Type | Description |
150
+ | --- | --- | --- |
151
+ | `FEN` | `string` | Required. Board position in FEN notation. |
152
+ | `onChange` | `(moveData: MoveData) => void` | Required. Called after a user move. |
153
+ | `onEndGame` | `(result: GameResult) => void` | Required. Called when the engine detects a game result. |
154
+ | `onClick` | `(data: ClickData) => void` | Called when a board cell is clicked. |
155
+ | `change` | `ChangeMove` | Applies an external move to the board. |
156
+ | `reversed` | `boolean` | Renders the board from the opposite side. |
157
+ | `config` | `Partial<ChessBoardConfig>` | Board sizing, classes, piece map, and visual configuration. |
158
+ | `playerColor` | `"white" \| "black"` | Restricts interaction to one color. |
159
+ | `viewOnly` | `boolean` | Disables user moves. |
160
+ | `moveHighlight` | `[SquarePos, SquarePos]` | Highlights a move path. |
161
+ | `arrows` | `Array<{ start: number[]; end: number[]; color?: string }>` | Draws arrows on the board. |
162
+ | `toggleTurn` | `boolean` | Enables or disables automatic turn switching. Defaults to `true`. |
81
163
 
82
- - [Tatiana Utbanova](https://www.linkedin.com/in/tatiana-utbanova-6415b8271/) - Design owner
83
- - [Alexander Utbanov](https://linkedin.com/in/alexander-utbanov-a9670a210/) - Code owner
164
+ ## FEN Notes
84
165
 
85
- ---
166
+ - `FEN` controls the initial board state and can be replaced from React state.
167
+ - A number in a FEN row means that many consecutive empty cells.
168
+ - Standard 8x8 chess positions and larger custom boards are supported.
86
169
 
87
- ## 📄 License
170
+ ## Authors
88
171
 
89
- MIT © [react-chessboard-ui](https://github.com/)
172
+ - [Tatiana Utbanova](https://www.linkedin.com/in/tatiana-utbanova-6415b8271/) - Design owner
173
+ - [Alexander Utbanov](https://linkedin.com/in/alexander-utbanov-a9670a210/) - Code owner
90
174
 
91
- ---
175
+ ## License
92
176
 
93
- ## 🧠 Keywords (for discoverability)
177
+ MIT
178
+ _________
179
+ ## Keywords
94
180
 
95
181
  `react` `react-chess` `react-chessboard` `react-chessboard-ui` `js-chess` `chess` `chessboard` `chessboard component` `chess engine`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-chessboard-ui",
3
- "version": "3.0.0",
3
+ "version": "3.0.2",
4
4
  "description": "All-in-one React chessboard UI with a built-in chess engine, FEN state control, move validation, drag-and-drop pieces, game-end callbacks, and customizable styles.",
5
5
  "author": "skilldill",
6
6
  "license": "MIT",