React-pgn-viewer NPM

React Pgn Viewer

npm version npm Downloads license

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 (
      <PgnViewer
        blackSquareColour='steelBlue'
        nodeToModify='pre code'
        nodeModification={this.htmlModification}
        innerHTML
      >
        {'<pgn>1.e4 e5 2.f4 exf4'</pgn>}
      </PgnViewer
      )
  }
}

import PgnViewer from 'react-pgn-viewer'

class Example2 extends React.Component {

  render() {
    return (
      <PgnViewer
        blackSquareColour='steelBlue'
        innerHTML={false}
      >
        1.e4 e5 2.f4 exf4
      </PgnViewer
      )
  }
}

Different viewing methods

For viewing partial pgns or a singular FEN position, add these modifiers to the pgn text

Modifier	Explanation
StartAtMove "8"	This will skip the first 7 moves and start immediately at move 8. Must be a whole number.
EndAtMove "15"	This will cut off the game after move 15 and must be used in combination with StartAtMove. Must be a whole number.
Fen "10w"	Fen cannot be used with StartAtMove or EndAtMove because it is one position. This shows move 10 after white moved so it will be blacks move
Fen "15b"	This shows the position after Black moved in 15. It will be whites move.

The styles

The icons use font-awesome 4 CSS. If you aren't already using that, simply put the cdn in the head of your html

<head>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
  integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
...
</head>

Properties

This library uses 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 `<pgn>`. 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