@bezalel6/react-chessground

Modern React wrapper for Chessground - a mobile-friendly chess board with zero vulnerabilities.

Note: This is a modernized fork of the original react-chessground with all dependencies updated, vulnerabilities fixed, and full TypeScript support.

Features

• ♟️ Full chessboard with drag & drop, animations, and premoves
• 📱 Mobile-friendly with touch support
• 🎨 Customizable themes and piece sets
• ⚡ High performance with React 18+ support
• 📦 TypeScript support out of the box
• 🎯 Zero dependencies (except chessground)
• 🔧 Easy integration with chess engines

Installation

npm install @bezalel6/react-chessground
# or
yarn add @bezalel6/react-chessground
# or
pnpm add @bezalel6/react-chessground

Quick Start

import React, { useState } from 'react';
import Chessground from '@bezalel6/react-chessground';
import '@bezalel6/react-chessground/dist/style.css';

function ChessBoard() {
  const [fen, setFen] = useState(
    'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'
  );

  return (
    <Chessground
      width={600}
      height={600}
      fen={fen}
      orientation="white"
      onMove={(orig, dest) => {
        console.log(`Move from ${orig} to ${dest}`);
      }}
    />
  );
}

TypeScript Support

The package includes TypeScript definitions:

import React from 'react';
import Chessground, { ChessgroundProps } from '@bezalel6/react-chessground';
import type { Key, Piece } from 'chessground/types';

const MyChessboard: React.FC = () => {
  const handleMove = (orig: Key, dest: Key) => {
    console.log(`Moved from ${orig} to ${dest}`);
  };

  return (
    <Chessground
      fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
      onMove={handleMove}
    />
  );
};

Props

All Chessground configuration options are available as props, plus:

| Prop | Type | Description | |------|------|-------------| | width | string \| number | Board width (default: 100%) | | height | string \| number | Board height (default: 100%) | | style | React.CSSProperties | Additional styles | | onChange | () => void | Called after any board change | | onMove | (orig: Key, dest: Key) => void | Called after a move | | onDropNewPiece | (piece: Piece, key: Key) => void | Called when dropping a new piece | | onSelect | (key: Key) => void | Called when selecting a square |

Common Configurations

Viewonly Board

<Chessground
  fen={fen}
  viewOnly={true}
  coordinates={false}
/>

With Arrows and Circles

<Chessground
  fen={fen}
  drawable={{
    enabled: true,
    visible: true,
    autoShapes: [
      { orig: 'e2', dest: 'e4', brush: 'green' },
      { orig: 'e7', dest: 'e5', brush: 'red' }
    ]
  }}
/>

Free Movement Mode

<Chessground
  movable={{
    free: true,
    color: 'both'
  }}
/>

With Premoves

<Chessground
  fen={fen}
  premovable={{
    enabled: true,
    showDests: true,
    events: {
      set: (orig, dest) => console.log('Premove set'),
      unset: () => console.log('Premove unset')
    }
  }}
/>

Integration with chess.js

import { Chess } from 'chess.js';
import Chessground from 'react-chessground';

function ChessGame() {
  const [chess] = useState(new Chess());
  const [fen, setFen] = useState(chess.fen());

  const handleMove = (orig, dest) => {
    const move = chess.move({ from: orig, to: dest });
    if (move) {
      setFen(chess.fen());
    }
  };

  const calcMovable = () => {
    const dests = new Map();
    chess.board().forEach((row, y) => {
      row.forEach((piece, x) => {
        if (piece && piece.color === chess.turn()) {
          const square = `${String.fromCharCode(97 + x)}${8 - y}`;
          const moves = chess.moves({ square, verbose: true });
          if (moves.length) {
            dests.set(square, moves.map(m => m.to));
          }
        }
      });
    });
    return { free: false, dests, color: chess.turn() === 'w' ? 'white' : 'black' };
  };

  return (
    <Chessground
      fen={fen}
      onMove={handleMove}
      movable={calcMovable()}
      turnColor={chess.turn() === 'w' ? 'white' : 'black'}
      check={chess.inCheck() ? (chess.turn() === 'w' ? 'white' : 'black') : undefined}
    />
  );
}

Examples

Check out the examples in the repository:

• Basic Demo: cd example/demo && npm install && npm run dev
• Next.js Integration: cd example/with-nextjs && npm install && npm run dev
• Gatsby Integration: cd example/with-gatsby && npm install && npm run develop

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build

# Run linting
npm run lint

# Type checking
npm run type-check

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome)

License

GPL-3.0

Credits

• Chessground - The underlying chess board library
• Lichess - For creating and maintaining Chessground

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Support

For issues and feature requests, please use the GitHub issues page.