Awesome
Chessground ·
Chessground is a React Wrapper package for the original Chessground UI developed for lichess.org. This project also contains zero chess logic, please visit chess.js for validation/generation.
This package is in early stages of development, thus usage of this package in TypeScript is highly recommended.
Installation
Currently the package has peerDependencies
on react: ^16.8.0 || ^17.0.0 || ^18.0.0
and react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
.
# If you are using npm:
npm install @react-chess/chessground
# If you are using yarn:
yarn add @react-chess/chessground
Documentation
After installing, the component can be default imported and it has 4 optional props:
-
width: number
defaults to900
, determines width of the chessboard in pxs -
height: number
defaults to900
, determines height of the chessboard in pxs -
config: Config
defaults to{}
, determines various configuration properties of Chessground -
contained: boolean
defaults tofalse
, when enabled renders the chessboard in a100%
width & height div.
Renders a simple 900 x 900
board, with pieces in their default position:
import Chessground from "@react-chess/chessground";
// these styles must be imported somewhere
import "chessground/assets/chessground.base.css";
import "chessground/assets/chessground.brown.css";
import "chessground/assets/chessground.cburnett.css";
ReactDOM.render(<Chessground />, document.getElementById("root"));