0.0.9 • Published 7 years ago

reactjs-chessboard v0.0.9

Weekly downloads
5
License
MIT
Repository
github
Last release
7 years ago

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 --save

Usage

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

PropTypeDefaultExplanation
activeSquarestringnullThe last square that has been moved for highlight, ex. e4
blackSquareColorstringSteelBluecolor of the dark squares
whiteSquareColorstringAliceBluecolor of the light squares
orientationstring'w'board orientation
styleobject-boarder border style
widthstring (%) or number (px)600Width of the board and move list. The board will be 2/3rds of the width.
showCoordinatesbooleantrueshould 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

0.0.9

7 years ago

0.0.8

7 years ago

0.0.7

7 years ago

0.0.6

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago