https://github.com/ajgingrich/react-pgn-viewer

React component that parses pgn html elements in order to create interactive pgn viewers
https://github.com/ajgingrich/react-pgn-viewer

chess chess-notation fen pgn pgn-extract pgn-reader react

Last synced: 8 months ago
JSON representation

React component that parses pgn html elements in order to create interactive pgn viewers

• Host: GitHub
• URL: https://github.com/ajgingrich/react-pgn-viewer
• Owner: ajGingrich
• License: mit
• Created: 2018-02-27T17:36:32.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T22:12:09.000Z (over 3 years ago)
• Last Synced: 2024-12-22T02:36:11.357Z (over 1 year ago)
• Topics: chess, chess-notation, fen, pgn, pgn-extract, pgn-reader, react
• Language: JavaScript
• Homepage:
• Size: 425 KB
• Stars: 8
• Watchers: 2
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Pgn Viewer

![npm version](https://img.shields.io/npm/v/react-pgn-viewer.svg)

![npm Downloads](https://img.shields.io/npm/dt/react-pgn-viewer.svg)

![license](https://img.shields.io/npm/l/react-pgn-viewer.svg)

## Installation

```

npm install react-pgn-viewer --save

```

## Usage

```

import PgnViewer from 'react-pgn-viewer'

class Example1 extends React.Component {

  htmlModification = (node) => {

    modifyNode(node)

  }

  render() {

    return (

      

        {'1.e4 e5 2.f4 exf4'}

      

        1.e4 e5 2.f4 exf4

      

  

...

```

## Properties

This library uses [reactjs-chessboard](https://github.com/ajgingrich/reactjs-chessboard) for the board logic and display and it shares many props.

| Prop | Type | Default | Explanation |

| --- | :---: | :------: | :-------: |

| innerHTML | boolean | true | if true, will parse the pgn elements. If false, will make only one pgn from a text string |

| nodeToModify | string | N/A | HTML element that should be modified by `nodeModification`. *Only applicable if innerHTML is true.* |

| nodeModification | function | N/A | instructions for modify different HTML elements besides ``. *Only applicable if innerHTML is true.* |

| backgroundColor | string | #e1e5ed | background of the entire viewer |

| blackSquareColor | string | SteelBlue | color of the dark squares |

| whiteSquareColor | string | AliceBlue | color of the light squares |

| orientation | string | 'w' | board orientation |

| width | string (%) or number (px) | 600 | Width of the board and move list. The board will be 2/3rds of the width. |

| showCoordinates | boolean | true | should show coordinates along the A file and first Rank |

## Demo

https://blog.andrewgingrich.com/#/post/2018/07/22/chess-urbina-duran-2018

## Contributing

To run the examples:

```

npm install

npm run dev

```

Then open `localhost:8000` in a browser.

Tested with React 16.3