react-chess

Renders a chess board using React

Installation

npm install --save react-chess

Demo

• Basic but functional demo

Usage

Default lineup, movable pieces

const React = require('react')
const ReactDOM = require('react-dom')
const Chess = require('react-chess')
 
ReactDOM.render(<Chess />, document.getElementById('main'))

Specifying lineups

const React = require('react')
const ReactDOM = require('react-dom')
const Chess = require('react-chess')
 
const lineup = ['R@h1', 'P@f2', 'q@d8', 'R@a1', 'P@a2', 'P@c2', 'b@c8', 'p@d7', 'Q@d1', 'n@g8']
 
ReactDOM.render(<Chess pieces={lineup} />, document.getElementById('main'))

Properties

• allowMoves - boolean Whether or not to allow piece movement (default: true)
• highlightTarget - boolean Whether or not to highlight the target square on move (default: true)
• drawLabels - boolean Whether or not to render labels (1-8, a-h) (default: true)
• lightSquareColor - string Color to use for light squares (default: #f0d9b5)
• darkSquareColor - string Color to use for dark squares (default: #b58863)
• pieces - array Array of pieces to draw. Each item should be a piece in algebraic notation, for instance Q@d1 for a white queen at square d1. (default: Chess.getDefaultLineup())
• onMovePiece - function Function that is called when a piece moves to a new position. Receives three arguments:
  • piece - object Object with properties notation (R@h1 etc), name (R), position (h1), index (index in pieces array)
  • fromSquare - string Previous square position
  • toSquare - string New square position
• onDragStart - function Function that is called when a piece starts to move. Receives same arguments as onMovePiece except toSquare. Returning false from this function will prevent the dragging from happening.

License

MIT © Espen Hovlandsdal