Chessy-board NPM

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']}
        />
    );
  }
}