chessy-board
v0.9.0
Published
A light react chess board
Downloads
44
Maintainers
Readme
Chessy Board
A light react chess board. Live example on codesandbox.
Installation and Usage
The simplest way to use chessy-board is to install it from npm.
npm install --save chessy-board
Then use it in your app:
import React from 'react';
import Board from 'chessy-board';
class App extends React.Component {
state = {
matrix: {
'1': {
a: { color: 'white', role: 'queen'},
b: { color: 'white', role: 'king'},
c: { color: 'white', role: 'bishop'},
d: { color: 'white', role: 'king'},
e: null,
f: null,
g: null,
h: null,
},
'5': {
c: { color: 'white', role: 'pawn'}
}
}
}
onSquareClick ({ row, col, elements }) {
/* Do something with target square.. */
}
render() {
const { selectedOption } = this.state;
return (
<Board
isLoading={false}
matrix={this.state.matrix}
onClick={this.onSquareClick}
orientation={0}
highLightSelections={['c7']}
highLightOptions={['c6', 'c5']}
/>
);
}
}
Props
Props you may require/may need to specify:
className
- apply a class name to boardisLoading
- allows to show spinner over boardmatrix
- position pieces on boardonClick
- callback with clicked square detailsorientation
- white/black point of viewhighLightSelections
- highlight selected pieceshighLightOptions
- highlight possible move options for selected piececolors
- defines board's main elements color (black/white/selections color)
License
Chessy Board is MIT Licensed.