React-chess NPM

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.