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";

| Name | Type | Default | Description | | --- | --- | --- | ---| | allowMarkers | boolean | false | allow round markers with right click | | check | boolean|false| true if current position contains check | | clickable | boolean | false | allow click-click moves | | draggable | boolean | false | allow moves & premoves to use drag'n drop | | lastMoveSquares | string[] | [] | squares part of the last move ["c3", "c4"] | | turnColor | "white" | "black" | "white" | turn to play | | maxWidth | number | Infinity | Max width in pixels | | minWidth | number | 160 | Min width in pixels | | movableColor | "white" | "black" | "both" | "both" | color that can move | | onMove | (move: Move) => void | | called after move | | onResize | (width: number) => void| | called after resize | | onSetPremove | (move: Move, playPremove: () => void, cancelPremove: () => void): void | | called after the premove has been set | | onUnsetPremove | () => void | | called after the premove has been unset | | orientation | "white" | "black" | "white" | board orientation | | position | Position | string | {} | FEN string or Position object | | premovable | boolean | false | allow premoves for color that can not move | | resizable | boolean | false | allow resize | | showCoordinates| boolean | true | include coords attributes | | transitionDuration | number | 300 | The time in seconds it takes for a piece to slide to the target square | | validMoves | ValidMoves | {} | valid moves. {"a2" ["a3" "a4"] "b1" ["a3" "c3"]} | | viewOnly | boolean | false | don't bind events: the user will never be able to move pieces around | | width | number | 480 | board width in pixels |

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[]>;