orivoir_react-chessboard v1.2.3

react-chessboard

The React Chessboard Library used at ChessOpenings.co.uk

Inspired and adapted from the unmaintained chessboardjsx

What is react-chessboard?

react-chessboard is a React component that provides chessboard functionality to your application. The Chess game logic that controls the board should be independent to the board, using a library such as Chess.js. An example of these two working together is shown in the example below. For interactive examples visit react-chessboard.com.

ChessOpenings.co.uk was originally built utilising the chessboardjsx library. With chessboardjsx being unmaintained, it made it difficult to add functionality or optimise performance, so react-chessboard was made.

Installation

npm i react-chessboard

Features

Current

• Accessible Functions
  • chessboardRef.current.clearPremoves();
• Board Orientation Choice
• Custom Actions
  • getPositionObject
  • onDragOverSquare
  • onMouseOutSquare
  • onMouseOverSquare
  • onPieceClick
  • onPieceDragBegin
  • onPieceDragEnd
  • onPieceDrop
  • onSquareClick
  • onSquareRightClick
• Customisable Board Styles
• Customisable Pieces
• Customisable Square Styles
• Drag and Drop
• Draw Arrows with Drag or Props
• Mobile Compatibility
• Moving Piece Animations
• Optional Square Coordinates Notation
• Position Control
• Premoves
• Responsive Board Width
• TypeScript Support

Planned

• Promotion Piece Select
• Spare Pieces

Notes

• Between version 0.0.3 and 0.0.4, onPieceDrop was changed to allow you to return a value of true or false depending on whether the move was successful or not.
• If more than one board is rendered and draggable on a low end device, performance will struggle due to performance issues with react-dnd.
• In the rare case that react-chessboard component is hot swapped out for another in its place, this will cause an issue with the CustomDragLayer. To prevent this, the react-chessboard component needs to be completely unmounted before being replaced. An example of how this can be achieved is shown in example/src/index.js.

Usage

Bare Minimum

import { Chessboard } from "react-chessboard";

export default function App() {
  return (
    <div>
      <Chessboard id="BasicBoard" />
    </div>
  );
}

Basic Example

import { useState } from "react";
import Chess from "chess.js";
import { Chessboard } from "react-chessboard";

export default function PlayRandomMoveEngine() {
  const [game, setGame] = useState(new Chess());

  function safeGameMutate(modify) {
    setGame((g) => {
      const update = { ...g };
      modify(update);
      return update;
    });
  }

  function makeRandomMove() {
    const possibleMoves = game.moves();
    if (game.game_over() || game.in_draw() || possibleMoves.length === 0)
      return; // exit if the game is over
    const randomIndex = Math.floor(Math.random() * possibleMoves.length);
    safeGameMutate((game) => {
      game.move(possibleMoves[randomIndex]);
    });
  }

  function onDrop(sourceSquare, targetSquare) {
    let move = null;
    safeGameMutate((game) => {
      move = game.move({
        from: sourceSquare,
        to: targetSquare,
        promotion: "q", // always promote to a queen for example simplicity
      });
    });
    if (move === null) return false; // illegal move
    setTimeout(makeRandomMove, 200);
    return true;
  }

  return <Chessboard position={game.fen()} onPieceDrop={onDrop} />;
}

Advanced Examples

For more advanced code usage examples, please see example boards shown in example/src/boards.

Props

Contributing

1. Fork this repository
2. Clone your forked repository onto your development machine git clone https://github.com/yourUsernameHere/react-chessboard.git cd react-chessboard
3. Create a branch for your PR git checkout -b your-branch-name
4. Set upstream remote git remote add upstream https://github.com/Clariity/react-chessboard.git
5. Make your changes
6. Test your changes using the example folder npm run build cd example npm start
7. Push your changes git add . git commit -m "feature/cool-new-feature" git push --set-upstream origin your-branch-name
8. Create pull request on GitHub
9. Contribute again git checkout main git pull upstream main git checkout -b your-new-branch-name

LICENSE

MIT