# React Pgn Viewer
## 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