Welcome to React Chess Analysis Board!

Description

React Chess Analysis Board provides a React component you can drop into your React app to render an analysis board of any PGN string.

You can fully customize the style of this analysis board.

Usage

Getting Started

1. Install the library
   npm install react-chess-analysis-board
   or
   yarn add react-chess-analysis-board

2. Use the component

API

React Chess Analysis Board accepts the following props:

• pgnString [string | required]: any valid PGN
• config [object | optional]: an object for various components
  • boardConfig [object | optional]: an object for configs related to the board
    • fen [string | optional]: a fen string to indicate the initial position of the board for analysis
    • ChessBoardProps [object | optional]: props that are passed directly to React-Chessboard, used for styling the board.
• getCurrentPosition [function | optional]: calls your callback function, passing a currentPosition object as a parameter, which can be used to construct another analysis board you are keeping in sync with this one.
• currentPosition** [object | optional]**: sets the entire state of the analysis board. Used, for example, if keeping two analysis boards in sync with one another. You should directly pass the object from a getCurrentPosition call from another analysis board you are keeping in sync with this one.

Styling

React-chess-analysis-board looks for RCAB- prefixed classNames you can use in your source code. If you create css classes with any of the classNames found in src/lib/style.css and make them available to the ChessAnalysisBoard component, they will be applied. We recommend copying src/lib/styles.css into your own css file, and then iterating on the styling from there.

Features

Current

• Full React Analysis Board component
• Subcomponents can be accessed individually (BoardHeader, Board, Panel, and Moves)
• Managed state for unlimited branches of analysis
  • Traverse state with panel buttons or arrow keys
  • Create an alternative branch by exploring new moves
  • Access any board state on any branch by clicking on the move
• PGN-viewer functionality
• Style with your own css classes

Planned

• Ability to show chess engine notation from a connected engine
• Stronger control over styles and layout, especially around Moves component
• Handling pawn promotion in side lines outside the root PGN (planned inclusion in react-chessboard) and will then be handled in this library

Contributing

Making Contributions

• Use your judgement — if it’s an obvious need or a bugfix, feel free to open a PR directly.
• If it materially changes the experience of using the library, is a major new feature, or is something you think someone else might already be working on, please open an issue for discussion before contributing, or confirm that you’re working on it within the discussion on an existing issue.
• Unsure what to contribute? Check out the existing issues for inspiration.

Opening a PR

1. Fork this repository
2. Clone your forked repository onto your development machine git clone https://github.com/yourUsernameHere/react-chess-analysis-board.git cd react-chess-analysis-board
3. Create a branch for your PR git checkout -b your-branch-name
4. Set upstream remote git remote add upstream https://github.com/ps2-controller/react-chess-analysis-board.git
5. Make your changes — the lib folder contains the library with index.tsx as the entry point, and App.tsx imports and uses the library to make local development easy. Use npm run dev to run App.tsx in your browser.
6. Push your changes git add . git commit -m "feature/cool-new-feature" git push --set-upstream origin your-branch-name
7. Create pull request on GitHub
8. Contribute again git checkout main git pull upstream main git checkout -b your-new-branch-name

• Note: There’s one additional undocumented easter egg config for fans of Agadmator chess channel in this library. Can you find it? 😉