{"id":26310,"library":"replay-viewer","title":"Replay Viewer","description":"A React component and utility library for rendering Rocket League replay data in WebGL using Three.js. Current stable version is 0.9.1, with an active release cadence. Key differentiators include tight integration with React, support for custom loadouts via rl-loadout-lib, and built-in playback controls using Material-UI. Ships TypeScript types. Targeted at developers building Rocket League replay analysis tools or interactive viewers. Peer dependencies include React 17, Three.js 0.139, and Material-UI 4.9.","status":"active","version":"0.9.1","language":"javascript","source_language":"en","source_url":"https://github.com/SaltieRL/WebReplayViewer","tags":["javascript","Rocket","League","Replay","React","Three","WebGL","typescript"],"install":[{"cmd":"npm install replay-viewer","lang":"bash","label":"npm"},{"cmd":"yarn add replay-viewer","lang":"bash","label":"yarn"},{"cmd":"pnpm add replay-viewer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"UI components for playback controls","package":"@material-ui/core","optional":false},{"reason":"Required as a peer dependency for component usage","package":"react","optional":false},{"reason":"Required for DOM rendering","package":"react-dom","optional":false},{"reason":"WebGL rendering library","package":"three","optional":false}],"imports":[{"note":"Named export, not default","wrong":"import ReplayViewer from 'replay-viewer'","symbol":"ReplayViewer","correct":"import { ReplayViewer } from 'replay-viewer'"},{"note":"Exact name is ReplayControls","wrong":"import { Controls } from 'replay-viewer'","symbol":"ReplayControls","correct":"import { ReplayControls } from 'replay-viewer'"},{"note":"Custom hook for programmatic control","wrong":"import { useReplay } from 'replay-viewer'","symbol":"useReplayViewer","correct":"import { useReplayViewer } from 'replay-viewer'"}],"quickstart":{"code":"import React from 'react';\nimport { ReplayViewer } from 'replay-viewer';\n\nfunction App() {\n  const replayUrl = 'https://example.com/replay.json';\n  return (\n    <ReplayViewer\n      url={replayUrl}\n      width={800}\n      height={600}\n      autoplay={false}\n      enableLoadout={true}\n    />\n  );\n}\n\nexport default App;","lang":"typescript","description":"Shows basic usage of the ReplayViewer component with a replay URL, dimensions, and autoplay disabled."},"warnings":[{"fix":"Update peer deps to match v0.9.1 requirements","message":"Peer dependency versions changed between releases: ensure @material-ui/core ^4.9.7, React ^17.0.2, Three ^0.139.0","severity":"breaking","affected_versions":">=0.8.0 <0.9.0"},{"fix":"No action needed unless custom theming relied on styled-components","message":"Older versions used styled-components internally; newer versions removed it","severity":"deprecated","affected_versions":">=0.5.0 <0.6.0"},{"fix":"Set enableLoadout prop to false to skip loadout loading","message":"Loadouts require rl-loadout-lib; if loading fails, falls back to basic assets","severity":"gotcha","affected_versions":">=0.8.1"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"npm install three@0.139.0","cause":"Missing Three.js peer dependency","error":"Module not found: Can't resolve 'three'"},{"fix":"Ensure the URL points to valid JSON replay data","cause":"Replay data not properly fetched or empty","error":"TypeError: Cannot read properties of undefined (reading 'map')"},{"fix":"Downgrade to React 17 or use a compatibility layer","cause":"Using React 18 but library expects React 17","error":"react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}