0.0.9 • Published 6 years ago
reactjs-chessboard v0.0.9
Fork from react-chessboardjs
There are several major differences react-chessboardjs
- Images are imported dynamically and loaded directly into the bundle. This elimnates need for next-images or further configuration
- Board is not draggable which reduces the bundle size considerably.
- There are no piece themes in order to minimize bundle size
- The last move can be highlighted as an active square
Installation
npm install reactjs-chessboard --saveUsage
import Chessboard from 'reacjs-chessboard'
class Example extends React.Component {
render() {
return (
<Chessboard
blackSquareColour="steelblue"
whiteSquareColour="white"
width={600}
style={{
border: '2px solid lightgrey',
}}
orientation="b"
/>
)
}
}Properties
| Prop | Type | Default | Explanation |
|---|---|---|---|
| activeSquare | string | null | The last square that has been moved for highlight, ex. e4 |
| blackSquareColor | string | SteelBlue | color of the dark squares |
| whiteSquareColor | string | AliceBlue | color of the light squares |
| orientation | string | 'w' | board orientation |
| style | object | - | boarder border style |
| width | string (%) or number (px) | 600 | Width of the board and move list. The board will be 2/3rds of the width. |
| showCoordinates | boolean | true | should show coordinates along the A file and first Rank |
Contributing
To run the examples:
npm install
npm run dev
# copy index.html from examples into the dist folderThen open localhost:8020 in a browser.
Tested with React 16.3