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
Props
Name | Type | Default | Description |
---|---|---|---|
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. |
Basic Usage
Integrations
Custom Board with Elvis and Lebron James