{"library":"react-chessboard","title":"React Chessboard Component","description":"React Chessboard is a modern, responsive, and accessible chessboard component for React applications, currently at stable version 5.10.0. It provides core functionality for rendering chessboards with drag-and-drop piece movement, custom piece rendering, animation, and comprehensive event handling. The library maintains a continuous release cadence, with frequent minor updates and bug fixes, often several times a month. Key differentiators include robust mobile support, built-in responsiveness, accessibility features, and full TypeScript support, ensuring type safety and improved developer experience. It requires React 19.0.0 as a peer dependency, aligning with the latest React ecosystem, making it suitable for modern React projects and providing a flexible foundation for building various chess-related user interfaces.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-chessboard"],"cli":null},"imports":["import { Chessboard } from 'react-chessboard';","import type { ChessboardProps } from 'react-chessboard';","import type { SquareRenderer } from 'react-chessboard';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { useState, useCallback } from 'react';\nimport { Chessboard } from 'react-chessboard';\nimport { Chess } from 'chess.js'; // Often used for game logic\n\nfunction App() {\n  const [game, setGame] = useState(new Chess());\n\n  const onDrop = useCallback((sourceSquare: string, targetSquare: string) => {\n    try {\n      const move = game.move({\n        from: sourceSquare,\n        to: targetSquare,\n        promotion: 'q' // For simplicity, always promote to queen\n      });\n      if (move === null) return false; // Illegal move\n      setGame(new Chess(game.fen())); // Update state to trigger re-render\n      return true; // Valid move\n    } catch (e) {\n      console.error(\"Error making move:\", e);\n      return false; // Error (e.g., illegal move)\n    }\n  }, [game]);\n\n  return (\n    <div style={{ maxWidth: '400px', margin: 'auto', padding: '20px' }}>\n      <h1>React Chessboard Simple Game</h1>\n      <Chessboard position={game.fen()} onPieceDrop={onDrop} />\n      <p style={{ marginTop: '10px' }}>Current FEN: {game.fen()}</p>\n      <button style={{ marginTop: '10px' }} onClick={() => setGame(new Chess())}>Reset Game</button>\n    </div>\n  );\n}\n\nexport default App;","lang":"typescript","description":"Demonstrates basic setup of the Chessboard component, integrating with `chess.js` for game logic to handle piece drops, update the game state, and display the FEN.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}