React Board

An easy-to-use React chessboard.

Demo

Check out the demo in the React Chess repository.

Install

npm i @chesslablab/react-board

Usage

Initialize a Classical Board

1import { ClassicalBoard } from '@chesslablab/react-board';
2
3function App() {
4  const stateBoard = {
5    turn: 'w',
6    isCapture: false,
7    isCheck: false,
8    isMate: false,
9    isStalemate: false,
10    fen: [
11      'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq -',
12      'rnbqkbnr/pppppppp/8/8/3P4/8/PPP1PPPP/RNBQKBNR b KQkq d3',
13      'rnbqkb1r/pppppppp/5n2/8/3P4/8/PPP1PPPP/RNBQKBNR w KQkq -',
14      'rnbqkb1r/pppppppp/5n2/8/2PP4/8/PP2PPPP/RNBQKBNR b KQkq c3',
15      'rnbqkb1r/pppp1ppp/4pn2/8/2PP4/8/PP2PPPP/RNBQKBNR w KQkq -',
16      'rnbqkb1r/pppp1ppp/4pn2/8/2PP4/2N5/PP2PPPP/R1BQKBNR b KQkq -',
17      'rnbqk2r/pppp1ppp/4pn2/8/1bPP4/2N5/PP2PPPP/R1BQKBNR w KQkq -',
18      'rnbqk2r/pppp1ppp/4pn2/8/1bPP4/2N1P3/PP3PPP/R1BQKBNR b KQkq -',
19      'rnbq1rk1/pppp1ppp/4pn2/8/1bPP4/2N1P3/PP3PPP/R1BQKBNR w KQ -',
20      'rnbq1rk1/pppp1ppp/4pn2/8/1bPP4/2N1PN2/PP3PPP/R1BQKB1R b KQ -',
21    ],
22    flip: 'w',
23  };
24
25  const filterMove = () => {
26    // Implement pre-processing logic for the chess move.
27  }
28
29  const handleMove = () => {
30    // Implement validation logic for the chess move.
31  }
32
33  return (
34    <ClassicalBoard
35      stateBoard={stateBoard}
36      goBack={-5}
37      filterMove={filterMove}
38      handleMove={handleMove}
39    />
40  );
41}
42
43export default App;

Initialize a Capablanca Board

1import { CapablancaBoard } from '@chesslablab/react-board';
2
3function App() {
4  const stateBoard = {
5    turn: 'w',
6    isCapture: false,
7    isCheck: false,
8    isMate: false,
9    isStalemate: false,
10    fen: [
11      'rnabqkbcnr/pppppppppp/10/10/10/10/PPPPPPPPPP/RNABQKBCNR w KQkq -',
12      'rnabqkbcnr/pppppppppp/10/10/5P4/10/PPPPP1PPPP/RNABQKBCNR b KQkq f3',
13      'rnabqkbcnr/ppppp1pppp/10/5p4/5P4/10/PPPPP1PPPP/RNABQKBCNR w KQkq f6',
14      'rnabqkbcnr/ppppp1pppp/10/5p4/5P4/7N2/PPPPP1PPPP/RNABQKBC1R b KQkq -',
15      'r1abqkbcnr/ppppp1pppp/2n7/5p4/5P4/7N2/PPPPP1PPPP/RNABQKBC1R w KQkq -',
16    ],
17    flip: 'b',
18  };
19
20  const filterMove = () => {
21    // Implement pre-processing logic for the chess move.
22  }
23
24  const handleMove = () => {
25    // Implement validation logic for the chess move.
26  }
27
28  return (
29    <CapablancaBoard
30      stateBoard={stateBoard}
31      goBack={0}
32      filterMove={filterMove}
33      handleMove={handleMove}
34    />
35  );
36}
37
38export default App;

Contributions

See the contributing guidelines.

License

The MIT License.