ii-react-chessboard

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