ii-react-chessboard v2.0.3

Customizable React chessboard component

ii-react-chessboard is a React component with a flexible "just a board" API. It's compatible with touch as well as standard HTML5 drag and drop. Live Demo

• Usage
  • Installation
  • Example
• API
  • Board
  • Position Object
  • FEN String
  • Move
  • ValidMoves

Usage

Installation

npm install ii-react-chessboard # or yarn add ii-react-chessboard

Example

import { Board } from "ii-react-chessboard";

function App() {
  return (
    <Board position="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1" />
  );
}

The code above will render chessboard with starting position:

For more examples please visit our Storybook page

API

Board

import { Board } from "ii-react-chessboard";

Position Object

import { Position } from "ii-react-chessboard";

You can use a JavaScript object to represent a board position.

The object property names must be algebraic squares (ie: e4, b2, c6, etc) and the values must be valid piece codes (ie: wP, bK, wQ, etc).

FEN String

You can use Forsyth-Edwards Notation (FEN) to represent a board position.

Note that FEN notation captures more information than ii-react-chessboard requires, like who's move it is and whether or not castling is allowed. This information will be ignored; only the position information is used.

Move

import { Move } from "ii-react-chessboard";

Source code:

export interface Move {
  /**
   * The location the piece is moving from.
   * Must be in san format, e.g "h8"
   */
  from: string;

  /**
   * The location the piece is moving to.
   * Must be in san format, e.g "a1"
   */
  to: string;
}

ValidMoves

import { ValidMoves } from "ii-react-chessboard";

Source code:

export type ValidMoves = Record<string, string[]>;