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

$3

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

$3

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

function App() {
return (

);
}
`

The code above will render chessboard with starting position:

For more examples please visit our Storybook page

API

$3

`javascript
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 |

$3

`javascript
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).

$3

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.

$3

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

Source code:

`typescript
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;
}
`

$3

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

Source code:

`typescript
export type ValidMoves = Record;
``