Registry / web-framework / replay-viewer

replay-viewer

library0.9.1jsnpmunverified

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.

web-framework ai-ml data testing observability

npm install replay-viewer

github ↗package ↗

INSTALL

IMPORT

SIG · REPLAY-VIEWER

replay-viewer

web-frameworkjavascriptv0.9.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ReplayViewer

✓ import { ReplayViewer } from 'replay-viewer'

✗ import ReplayViewer from 'replay-viewer'

Named export, not default

ReplayControls

✓ import { ReplayControls } from 'replay-viewer'

✗ import { Controls } from 'replay-viewer'

Exact name is ReplayControls

useReplayViewer

✓ import { useReplayViewer } from 'replay-viewer'

✗ import { useReplay } from 'replay-viewer'

Custom hook for programmatic control

Shows basic usage of the ReplayViewer component with a replay URL, dimensions, and autoplay disabled.

import React from 'react'; import { ReplayViewer } from 'replay-viewer'; function App() { const replayUrl = 'https://example.com/replay.json'; return ( <ReplayViewer url={replayUrl} width={800} height={600} autoplay={false} enableLoadout={true} /> ); } export default App;

Debug

Known issues

breakingPeer dependency versions changed between releases: ensure @material-ui/core ^4.9.7, React ^17.0.2, Three ^0.139.0

fix

Update peer deps to match v0.9.1 requirements

affects: >=0.8.0 <0.9.0

deprecatedOlder versions used styled-components internally; newer versions removed it

fix

No action needed unless custom theming relied on styled-components

affects: >=0.5.0 <0.6.0

gotchaLoadouts require rl-loadout-lib; if loading fails, falls back to basic assets

fix

Set enableLoadout prop to false to skip loadout loading

affects: >=0.8.1

Errors

Common errors & fixes

Module not found: Can't resolve 'three'

Missing Three.js peer dependency

fix

npm install three@0.139.0

TypeError: Cannot read properties of undefined (reading 'map')

Replay data not properly fetched or empty

fix

Ensure the URL points to valid JSON replay data

react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18

Using React 18 but library expects React 17

fix

Downgrade to React 17 or use a compatibility layer

Upgrade

Version history

0.9.1latest on npm

Audit

Dependencies

@material-ui/corerequiredUI components for playback controls

reactrequiredRequired as a peer dependency for component usage

react-domrequiredRequired for DOM rendering

threerequiredWebGL rendering library

Agent activity

18 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/SaltieRL/WebReplayViewer ↗

packagehttps://www.npmjs.com/package/replay-viewer ↗