Package Exports

chessy-board

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (chessy-board) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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 board
isLoading - allows to show spinner over board
matrix - position pieces on board
onClick - callback with clicked square details
orientation - white/black point of view
highLightSelections - highlight selected pieces
highLightOptions - highlight possible move options for selected piece
colors - defines board's main elements color (black/white/selections color)

License

Chessy Board is MIT Licensed.