Chessboard.jsx

A chessboard for React inspired by chessboard.js
View on Github  

Chessboard.jsx is a customizable chessboard component that works as a standalone drag and drop chessboard on standard and touch devices. It integrates easily with chess.js, allowing for move validation, engine integrations, and more.

npm install --save chessboardjsx
8
7
6
5
4
3
2
1
a
b
c
d
e
f
g
h

Props

NameTypeDefaultDescription
allowDrag
func
() => true
A function to call when a piece drag is initiated. Returns true if the piece is draggable, false if not. Signature: function( { piece: string, sourceSquare: string } ) => bool
boardStyle
object
{}
The style object for the board.
calcWidth
func
() => {}
A function for responsive size control, returns the width of the board. Signature: function({ screenWidth: number, screenHeight: number }) => number
darkSquareStyle
object
{ backgroundColor: 'rgb(181, 136, 99)' }
The style object for the dark square.
draggable
bool
true
If false, the pieces will not be draggable
dropOffBoard
'snapback' | 'trash'
'snapback'
The behavior of the piece when dropped off the board. 'snapback' brings the piece back to it's original square and 'trash' deletes the piece from the board
dropSquareStyle
object
{ boxShadow: 'inset 0 0 1px 4px yellow' }
The style object for the current drop square. { backgroundColor: 'sienna' }
getPosition
func
() => {}
A function that gives access to the current position object. For example, getPosition = position => this.setState({ myPosition: position }). Signature: function(currentPosition: object) => void
id
string | number
'0'
The id prop is necessary if more than one board is mounted. Drag and drop will not work as expected if not provided.
lightSquareStyle
object
{ backgroundColor: 'rgb(240, 217, 181)' }
The style object for the light square.
onDragOverSquare
func
() => {}
A function to call when a piece is dragged over a specific square. Signature: function(square: string) => void
onDrop
func
() => {}
The logic to be performed on piece drop. See chessboardjsx.com/integrations for examples. Signature: function({ sourceSquare: string, targetSquare: string, piece: string }) => void
onMouseOutSquare
func
() => {}
A function to call when the mouse has left the square. See chessboardjsx.com/integrations/move-validation for an example. Signature: function(square: string) => void
onMouseOverSquare
func
() => {}
A function to call when the mouse is over a square. See chessboardjsx.com/integrations/move-validation for an example. Signature: function(square: string) => void
onPieceClick
func
() => {}
A function to call when a piece is clicked. Signature: function(piece: string) => void
onSquareClick
func
() => {}
A function to call when a square is clicked. Signature: function(square: string) => void
onSquareRightClick
func
() => {}
A function to call when a square is right clicked. Signature: function(square: string) => void
orientation
'white' | 'black'
'white'
Orientation of the board.
pieces
object
{}
An object with functions returning jsx as values(render prop). See https://www.chessboardjsx.com/custom Signature: { wK: function({ isDragging, squareWidth, droppedPiece, targetSquare, sourceSquare }) => jsx }
position
string | object
''
The position to display on the board. Can be either a FEN string or a position object. See https://www.chessboardjsx.com/basics/fen and https://www.chessboardjsx.com/basics/position-object for examples.
roughSquare
func
() => {}
A function that gives access to the underlying square element. It allows for customizations with rough.js. See chessboardjsx.com/custom for an example. Signature: function({ squareElement: node, squareWidth: number }) => void
showNotation
bool
true
If false, notation will not be shown on the board.
sparePieces
bool
false
If true, spare pieces will appear above and below the board.
squareStyles
object
{}
An object containing custom styles for squares. For example {'e4': {backgroundColor: 'orange'}, 'd4': {backgroundColor: 'blue'}}. See chessboardjsx.com/integrations/move-validation for an example
transitionDuration
number
300
The time it takes for a piece to slide to the target square. Only used when the next position comes from the position prop. See chessboardjsx.com/integrations/random for an example
undo
bool
false
When set to true it undos previous move
width
number
560
The width in pixels. For a responsive width, use calcWidth.
Chessboard.jsx is released under the MIT License