{"id":24206173,"url":"https://github.com/ajgingrich/react-pgn-viewer","last_synced_at":"2025-09-22T04:33:23.545Z","repository":{"id":57342421,"uuid":"123164817","full_name":"ajGingrich/react-pgn-viewer","owner":"ajGingrich","description":"React component that parses pgn html elements in order to create interactive pgn viewers","archived":false,"fork":false,"pushed_at":"2023-01-06T22:12:09.000Z","size":435,"stargazers_count":8,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-22T02:36:11.357Z","etag":null,"topics":["chess","chess-notation","fen","pgn","pgn-extract","pgn-reader","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ajGingrich.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-27T17:36:32.000Z","updated_at":"2024-09-23T23:02:26.000Z","dependencies_parsed_at":"2023-02-06T09:32:02.186Z","dependency_job_id":null,"html_url":"https://github.com/ajGingrich/react-pgn-viewer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajGingrich%2Freact-pgn-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajGingrich%2Freact-pgn-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajGingrich%2Freact-pgn-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajGingrich%2Freact-pgn-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajGingrich","download_url":"https://codeload.github.com/ajGingrich/react-pgn-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233824824,"owners_count":18736064,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chess","chess-notation","fen","pgn","pgn-extract","pgn-reader","react"],"created_at":"2025-01-14T00:19:26.618Z","updated_at":"2025-09-22T04:33:18.156Z","avatar_url":"https://github.com/ajGingrich.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Pgn Viewer\n\n![npm version](https://img.shields.io/npm/v/react-pgn-viewer.svg)\n![npm Downloads](https://img.shields.io/npm/dt/react-pgn-viewer.svg)\n![license](https://img.shields.io/npm/l/react-pgn-viewer.svg)\n\n## Installation\n\n```\nnpm install react-pgn-viewer --save\n```\n\n## Usage\n\n```\nimport PgnViewer from 'react-pgn-viewer'\n\nclass Example1 extends React.Component {\n\n  htmlModification = (node) =\u003e {\n    modifyNode(node)\n  }\n\n  render() {\n    return (\n      \u003cPgnViewer\n        blackSquareColour='steelBlue'\n        nodeToModify='pre code'\n        nodeModification={this.htmlModification}\n        innerHTML\n      \u003e\n        {'\u003cpgn\u003e1.e4 e5 2.f4 exf4'\u003c/pgn\u003e}\n      \u003c/PgnViewer\n      )\n  }\n}\n```\n\n**OR**\n\n```\nimport PgnViewer from 'react-pgn-viewer'\n\nclass Example2 extends React.Component {\n\n  render() {\n    return (\n      \u003cPgnViewer\n        blackSquareColour='steelBlue'\n        innerHTML={false}\n      \u003e\n        1.e4 e5 2.f4 exf4\n      \u003c/PgnViewer\n      )\n  }\n}\n```\n\n#### Different viewing methods\n\nFor viewing partial pgns or a singular FEN position, add these modifiers to the pgn text\n\n| Modifier | Explanation |\n| --- | :-------: |\n| [StartAtMove \"8\"] | This will skip the first 7 moves and start immediately at move 8. Must be a whole number. |\n| [EndAtMove \"15\"] | This will cut off the game after move 15 and must be used in combination with StartAtMove. Must be a whole number. |\n| [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 |\n| [Fen \"15b\"] | This shows the position after Black moved in 15. It will be whites move. |\n\n#### The styles\nThe icons use font-awesome 4 CSS. If you aren't already using that, simply put the cdn in the head of your html\n\n```\n\u003chead\u003e\n  \u003clink href=\"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css\" rel=\"stylesheet\"\n  integrity=\"sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN\" crossorigin=\"anonymous\"\u003e\n...\n\u003c/head\u003e\n```\n\n## Properties\n\nThis library uses [reactjs-chessboard](https://github.com/ajgingrich/reactjs-chessboard) for the board logic and display and it shares many props.\n\n| Prop | Type | Default | Explanation |\n| --- | :---: | :------: | :-------: |\n| innerHTML | boolean | true | if true, will parse the pgn elements. If false, will make only one pgn from a text string |\n| nodeToModify | string | N/A | HTML element that should be modified by `nodeModification`. *Only applicable if innerHTML is true.* |\n| nodeModification | function | N/A | instructions for modify different HTML elements besides `\u003cpgn\u003e`. *Only applicable if innerHTML is true.* |\n| backgroundColor | string | #e1e5ed | background of the entire viewer |\n| blackSquareColor | string | SteelBlue | color of the dark squares |\n| whiteSquareColor | string | AliceBlue | color of the light squares |\n| orientation | string | 'w' | board orientation |\n| width | string (%) or number (px) | 600 | Width of the board and move list. The board will be 2/3rds of the width. |\n| showCoordinates | boolean | true | should show coordinates along the A file and first Rank |\n\n## Demo\n\nhttps://blog.andrewgingrich.com/#/post/2018/07/22/chess-urbina-duran-2018\n\n## Contributing\n\nTo run the examples:\n\n```\nnpm install\nnpm run dev\n```\n\nThen open `localhost:8000` in a browser.\n\nTested with React 16.3\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajgingrich%2Freact-pgn-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajgingrich%2Freact-pgn-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajgingrich%2Freact-pgn-viewer/lists"}