react-use-chessboard
v1.0.0
Published
A React hook which provides a chessboard component and a chess game engine. Uses LiChess Chessground and Chess.js.
Downloads
1
Maintainers
Readme
useChessboard
A React hook which provides a chessboard component and a chess game engine. Uses LiChess Chessground and Chess.js.
npm install react-use-chessboard
import { useEffect } from 'react';
import { useChessboard } from 'react-use-chessboard';
// Import the chessground styles
import "chessground/assets/chessground.base.css";
import "chessground/assets/chessground.brown.css";
import "chessground/assets/chessground.cburnett.css";
const App = () => {
const { chess, board } = useChessboard({movable: {color: 'both'}}); // options are optional
// Make a random move in response to the user making a move
useEffect(() => {
const makeRandomMove = () => {
const moves = chess.moves();
const move = moves[Math.floor(Math.random() * moves.length)];
chess.move(move);
};
chess.on("move", makeRandomMove);
return () => {
chess.off("move", makeRandomMove);
};
}, [])
return (
<div>
{board}
</div>
);
};