react-fen-chess-board

react-fen-chess-board is as the name suggests a React chess board which is controlled using FEN
notation.
You can find a working demo here.

Installation

`npm install react-fen-chess-board

Rendering a static chess board

To render a static chess board you simply provide the FEN of the position you want to display.

``typescript jsx
import React from "react";
import { render } from "react-dom";
import { ChessBoard } from "react-fen-chess-board";

render(
// FEN for the starting position in chess
fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
/>,
document.getElementById("your-react-root")
);
``

!static board

Props

$3

Controls if the board should be rotated or not.

``typescript jsx
render(
fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
rotated
/>,
document.getElementById("your-react-root")
);
``

!rotated board

$3

A function which enables drag-and-drop and is called whenever the user drags and drops a piece. The
demo uses this prop
alongside chess.js to create
a useChessBoard
hook that enables a fully functional chess board.
See main.tsx for an example
of how to use it.

Since react-fen-chess-board uses react-dnd behind the
scenes your application needs to be wrapped in
a DndProvider in order to use onMove.
Out of the box react-fen-chess-board includes a ChessBoardDndProvider component you can use for
this purpose.

``typescript jsx
import React from "react";
import { render } from "react-dom";
import { ChessBoardDndProvider } from "react-fen-chess-board";
import MyChessBoard from "./MyChessBoard";

render(


,
document.getElementById("your-react-root")
);
``

$3

Besides the ability to pass render props or using CSS there is also an option to pass
a pieceTheme or boardTheme to change the appearance of the ChessBoard with less hassle.

#### boardTheme

``javascript
export const brownBoardTheme = {
darkSquare: "#b58863",
lightSquare: "#f0d9b5"
};

render(
fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
boardTheme={brownBoardTheme}
/>,
document.getElementById("your-react-root")
);
``

!boardTheme

#### pieceTheme

``javascript
import {
BlackPawn, BlackKnight, BlackBishop, BlackRook, BlackQueen, BlackKing,
WhitePawn, WhiteKnight, WhiteBishop, WhiteRook, WhiteQueen, WhiteKing
} from "./merida";

const meridaPieceTheme = {
"p": ({ board, position, dragSource }) => ,
"n": () => ,
"b": () => ,
"q": () => ,
"r": () => ,
"k": () => ,
"P": () => ,
"N": () => ,
"B": () => ,
"Q": () => ,
"R": () => ,
"K": () => ,
" ": () =>