react-chessboardjs-wrapper
v0.4.2
Published
A React wrapper for chessboard.js
Downloads
21
Readme
WIP Early stages.
A React wrapper for chessboard.js. Requires chessboard.js and jQuery to be available on the window object.
Usage
yarn add react-chessboardjs-wrapper
import ChessboardJs from 'react-chessboardjs-wrapper'
<ChessboardJs
animate // boolean, chessboard.js piece animations
blackSquareColour="steelblue" // or hex
border="10px solid #d3d3d3" // css border property
config={config} // The chessboard.js config object
onInitBoard={(board, boardId) => this._board = board} // callback fn, gets passed the chessboard.js board object, and the unique id
resize // effective if width prop is a string
showPromotionDialog={ // falsey, or object as shown
onSelect: piece => { // callback function, runs when a piece is selected
console.log(piece)
this.setState({
showPromotionDialog: false,
})
},
square: 'e8', // the square the select piece dialog appears on
}
whiteSquareColour="aliceblue" // or hex
width="80%" // string (%) || number (px)
/>
Notes:
Changing all props WITH THE EXCEPTION OF THE FOLLOWING means a full recreation of the board (as only these are settable via the chessboard.js API):
animate
blackSquareColour
border
config.position
config.orientation
resize
showPromotionDialog
whiteSquareColour
This wrapper is optimised for a modified chessboard.js, based on chessboard.js PR 97 which supports image caching. If using the non-modified published chessboard.js, it works anyway (falls back). fixes flickering in Safari (somewhat, it is still not perfect).
chessboard.js
config.showErrors
doesn't seem to work as advertised?Is chessboard.js is no longer maintained?
Examples
TODO
Dev
We use rollup.js. yarn dev
to watch files and rebuild on changes, yarn build
to build.
Tests
TODO, but I need to learn myself some React testing libs.