{"id":51319237,"url":"https://github.com/echecsjs/react-movesheet","last_synced_at":"2026-07-01T11:02:10.340Z","repository":{"id":349336590,"uuid":"1201936253","full_name":"echecsjs/react-movesheet","owner":"echecsjs","description":"React move notation panel — displays chess game moves with click navigation, variations, comments, NAGs, evaluation, and keyboard navigation.","archived":false,"fork":false,"pushed_at":"2026-06-22T13:38:46.000Z","size":2459,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-06-22T15:18:37.393Z","etag":null,"topics":["chess","notation","pgn","react","typescript"],"latest_commit_sha":null,"homepage":"https://github.com/echecsjs/react-movesheet#readme","language":"TypeScript","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/echecsjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-04-05T11:16:37.000Z","updated_at":"2026-06-22T13:39:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"e6a9d6a1-1179-4927-8c60-60b31624e593","html_url":"https://github.com/echecsjs/react-movesheet","commit_stats":null,"previous_names":["mormubis/react-movesheet","echecsjs/react-movesheet"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/echecsjs/react-movesheet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/echecsjs%2Freact-movesheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/echecsjs%2Freact-movesheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/echecsjs%2Freact-movesheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/echecsjs%2Freact-movesheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/echecsjs","download_url":"https://codeload.github.com/echecsjs/react-movesheet/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/echecsjs%2Freact-movesheet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35003464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-01T02:00:05.325Z","response_time":130,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","notation","pgn","react","typescript"],"created_at":"2026-07-01T11:02:09.433Z","updated_at":"2026-07-01T11:02:10.335Z","avatar_url":"https://github.com/echecsjs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @echecs/react-movesheet\n\nReact move notation panel — displays chess game moves with click navigation,\nvariations, comments, NAGs, evaluation, clock, and keyboard navigation. Inline\nstyles with CSS variable theming, zero dependencies beyond React and\n`@echecs/pgn`.\n\n## Installation\n\n```bash\nnpm install @echecs/react-movesheet\n# or\npnpm add @echecs/react-movesheet\n```\n\n`react` \u003e=18 and `@echecs/pgn` \u003e=4 are peer dependencies.\n\n## Quick start\n\n### Minimal\n\n```tsx\nimport parse from '@echecs/pgn';\nimport { MoveSheet } from '@echecs/react-movesheet';\n\nconst [game] = parse('1. e4 e5 2. Nf3 Nc6 3. Bb5 a6 *');\n\nexport function App() {\n  return \u003cMoveSheet game={game} /\u003e;\n}\n```\n\n### With navigation\n\n```tsx\nimport { useState } from 'react';\nimport parse from '@echecs/pgn';\nimport { MoveSheet } from '@echecs/react-movesheet';\n\nconst [game] = parse('1. e4 e5 2. Nf3 Nc6 3. Bb5 a6 *');\n\nexport function App() {\n  const [moveId, setMoveId] = useState\u003cstring | undefined\u003e();\n\n  return (\n    \u003cMoveSheet\n      currentMoveId={moveId}\n      game={game}\n      onSelectMove={setMoveId}\n      showComments\n      showNags\n    /\u003e\n  );\n}\n```\n\n## Props\n\n| Prop             | Type                       | Default     | Description                        |\n| ---------------- | -------------------------- | ----------- | ---------------------------------- |\n| `game`           | `PGN`                      | required    | Parsed PGN game from `@echecs/pgn` |\n| `currentMoveId`  | `string`                   | `undefined` | ID of the currently active move    |\n| `onSelectMove`   | `(moveId: string) =\u003e void` | —           | Called when a move is clicked      |\n| `onContextMenu`  | `(moveId: string) =\u003e void` | —           | Called on right-click of a move    |\n| `showComments`   | `boolean`                  | `true`      | Show inline comment text           |\n| `showEvaluation` | `boolean`                  | `false`     | Show engine evaluation after moves |\n| `showNags`       | `boolean`                  | `true`      | Show NAG glyphs (!, ?, !!, ??)     |\n| `showClock`      | `boolean`                  | `false`     | Show clock times                   |\n| `keyboard`       | `boolean`                  | `true`      | Enable arrow key navigation        |\n\n## Keyboard navigation\n\nWhen `keyboard` is enabled and the panel is focused:\n\n| Key   | Action                                          |\n| ----- | ----------------------------------------------- |\n| Right | Next move (main continuation)                   |\n| Left  | Previous move                                   |\n| Down  | Enter variation / cycle between variations      |\n| Up    | Exit variation (jump to move before the branch) |\n| Home  | First move                                      |\n| End   | Last move in current line                       |\n\n## CSS variable theming\n\nAll colours are controlled via CSS custom properties on a parent element:\n\n```tsx\n\u003cdiv\n  style={{\n    '--movesheet-background': '#1a1a2e',\n    '--movesheet-move-text': '#e0e0e0',\n    '--movesheet-active-move': '#3a5a8c',\n    '--movesheet-comment': '#8899aa',\n    '--movesheet-nag': '#cc8844',\n    '--movesheet-evaluation': '#6699cc',\n    '--movesheet-variation': '#7788aa',\n    '--movesheet-move-number': '#556677',\n  }}\n\u003e\n  \u003cMoveSheet game={game} /\u003e\n\u003c/div\u003e\n```\n\n| Variable                         | Default       | Description           |\n| -------------------------------- | ------------- | --------------------- |\n| `--movesheet-background`         | `transparent` | Panel background      |\n| `--movesheet-active-move`        | `#d4e8ff`     | Active move bg        |\n| `--movesheet-move-text`          | `inherit`     | Move SAN colour       |\n| `--movesheet-move-number`        | `inherit`     | Move number colour    |\n| `--movesheet-comment`            | `#666`        | Comment text colour   |\n| `--movesheet-comment-display`    | `inline`      | Comment display mode  |\n| `--movesheet-comment-font-style` | `italic`      | Comment font style    |\n| `--movesheet-font-family`        | `inherit`     | Panel font family     |\n| `--movesheet-font-size`          | `inherit`     | Panel font size       |\n| `--movesheet-line-height`        | `1.6`         | Panel line height     |\n| `--movesheet-nag`                | `inherit`     | NAG glyph colour      |\n| `--movesheet-evaluation`         | `gray`        | Eval text colour      |\n| `--movesheet-variation`          | `#888`        | Variation text colour |\n\n## Utilities\n\nThe package also exports tree utilities for advanced use:\n\n```tsx\nimport { buildTree, findNode, pathToNode } from '@echecs/react-movesheet';\nimport type { MoveNode } from '@echecs/react-movesheet';\n\nconst root = buildTree(game);\nconst node = findNode(root, 'm3w');\nconst path = pathToNode(root, 'm3w'); // [root, m1w, m1b, m2w, m2b, m3w]\n```\n\n## Exported types\n\n| Type             | Description                                                                                              |\n| ---------------- | -------------------------------------------------------------------------------------------------------- |\n| `Eval`           | `{ type: 'cp' \\| 'mate'; value: number; depth?: number }` — engine evaluation                            |\n| `MoveNode`       | Tree node representing a single move, with id, san, side, children, and optional eval/comment/nags/clock |\n| `MoveSheetProps` | All props accepted by `\u003cMoveSheet /\u003e`                                                                    |\n\n```tsx\nimport type { Eval, MoveNode, MoveSheetProps } from '@echecs/react-movesheet';\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fechecsjs%2Freact-movesheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fechecsjs%2Freact-movesheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fechecsjs%2Freact-movesheet/lists"}