Need a property to provide custom styles on specific board squares.

[csharptest]

Use case: In order to display possible valid/legal moves, moves resulting in threats, best moves, and other analytical display, I'd like to be able to use a prop to customize specific board squares. Thus the following would render the g5 square as solid red:

      <Chessboard
        id="board"
        position={this.state.fen}
        width={320}
        squareStyles={{
          g5: { backgroundColor: "red" }
        }}
        ... />

This could, in time, deprecate the use of selectedSquareStyle and selectedSquares since it would allow customization of board display in a number of ways. I would recommend retooling these two properties to simply overwrite (or merge) the value of squareStyles for each entry in selectedSquares with the value of selectedSquareStyle. This should reduce the maintenance of the two similar features.

[willb335]

Thanks for putting all of this out at once. It would be nice to get all these features out in one release.

This is very straightforward; I prefer this approach over selectedSquares. It seems squareStyles as you have it is flexible and easy to implement

[willb335]

Take a look at Square.js in the following commit. It was an easy change that allowed me to delete selectedSquareStyle and squareStyles. It's a much clearer way to style squares.

Thanks for the recommendation!

https://github.com/willb335/chessboardjsx/pull/22/commits/42c1ddfd7eec4db818c173b4bd9cd9152181b05e

[willb335]

A working example:

https://github.com/willb335/chessboardjsx/blob/pieces-render-prop/src/integrations/HumanVsHuman.js

[willb335]

In release 2.0