https://github.com/ajgingrich/reactjs-chessboard
based on react-chessboardjs and chessboardjs
https://github.com/ajgingrich/reactjs-chessboard
Last synced: 3 months ago
JSON representation
based on react-chessboardjs and chessboardjs
- Host: GitHub
- URL: https://github.com/ajgingrich/reactjs-chessboard
- Owner: ajGingrich
- Created: 2018-05-26T15:34:04.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-29T18:18:37.000Z (almost 7 years ago)
- Last Synced: 2025-02-17T07:38:49.017Z (4 months ago)
- Language: JavaScript
- Size: 148 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Fork from [react-chessboardjs](https://github.com/siansell/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 --save
```
## Usage
```
import Chessboard from 'reacjs-chessboard'
class Example extends React.Component {
render() {
return (
)
}
}
```
## 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 folder
```
Then open `localhost:8020` in a browser.
Tested with React 16.3