react-pgn-viewer
Advanced tools
npm install react-pgn-viewer --save
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
)
}
}
OR
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
)
}
}
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 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>
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 |
https://blog.andrewgingrich.com/#/post/2018/07/22/chess-urbina-duran-2018
To run the examples:
npm install
npm run dev
Then open localhost:8000 in a browser.
Tested with React 16.3
FAQs
React component for creating an interactive pgn viewer from string
The npm package react-pgn-viewer receives a total of 2 weekly downloads. As such, react-pgn-viewer popularity was classified as not popular.
We found that react-pgn-viewer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Malicious packages published to npm, PyPI, Go Modules, crates.io, and Packagist impersonate developer tooling to fetch staged malware, steal credentials and wallets, and enable remote access.
Security News
Microsoft has released an open source toolkit for enforcing runtime security policies on AI agents as adoption accelerates faster than governance controls.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.