Replay Viewer

0.9.1 verified Fri May 01 auth: no javascript

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.

Common errors

error Module not found: Can't resolve 'three' ↓

cause Missing Three.js peer dependency

fix

npm install three@0.139.0

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

cause Replay data not properly fetched or empty

fix

Ensure the URL points to valid JSON replay data

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

cause Using React 18 but library expects React 17

fix

Downgrade to React 17 or use a compatibility layer

Warnings

breaking Peer 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

deprecated Older versions used styled-components internally; newer versions removed it ↓

fix No action needed unless custom theming relied on styled-components

gotcha Loadouts require rl-loadout-lib; if loading fails, falls back to basic assets ↓

fix Set enableLoadout prop to false to skip loadout loading

Install

npm install replay-viewer

yarn add replay-viewer

pnpm add replay-viewer

Imports

ReplayViewer

wrong

import ReplayViewer from 'replay-viewer'

correct

import { ReplayViewer } from 'replay-viewer'

Named export, not default

ReplayControls

wrong

import { Controls } from 'replay-viewer'

correct

import { ReplayControls } from 'replay-viewer'

Exact name is ReplayControls

useReplayViewer

wrong

import { useReplay } from 'replay-viewer'

correct

import { useReplayViewer } from 'replay-viewer'

Custom hook for programmatic control

Quickstart

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;