Package Exports
- react-use-chessboard
- react-use-chessboard/dist/esm/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-use-chessboard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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>
);
};