React Composition Patterns
Integrate Helios into React components using hooks for state management and Refs for canvas access.
Quick Start
1. Create useVideoFrame Hook
This hook subscribes to Helios and returns the current frame, triggering re-renders.
// hooks/useVideoFrame.js
import { useState, useEffect } from 'react';
export function useVideoFrame(helios) {
const [frame, setFrame] = useState(helios.currentFrame.peek());
useEffect(() => {
// Subscribe to updates
const unsubscribe = helios.subscribe((state) => {
setFrame(state.currentFrame);
});
return unsubscribe;
}, [helios]);
return frame;
}
2. Create Composition Component
// App.jsx
import React, { useRef, useEffect } from 'react';
import { Helios } from '@helios-project/core';
import { useVideoFrame } from './hooks/useVideoFrame';
// Initialize Singleton (outside component to persist across re-renders)
const helios = new Helios({
duration: 10,
fps: 30
});
helios.bindToDocumentTimeline();
// Expose for Renderer/Player
if (typeof window !== 'undefined') window.helios = helios;
export default function App() {
const canvasRef = useRef(null);
const frame = useVideoFrame(helios);
useEffect(() => {
const ctx = canvasRef.current?.getContext('2d');
if (!ctx) return;
const { width, height } = canvasRef.current;
// Clear
ctx.clearRect(0, 0, width, height);
// Draw based on frame
const progress = frame / (helios.duration * helios.fps);
ctx.fillStyle = '#61dafb';
ctx.fillRect(progress * width, height / 2 - 50, 100, 100);
}, [frame]); // Re-run draw when frame changes
return <canvas ref={canvasRef} width={1920} height={1080} />;
}
Optimization
For complex scenes, avoid React state updates for every frame (which triggers full component re-render). Instead, use a useRef to hold the frame and an animation loop, or update the canvas imperatively inside subscribe.
Imperative Pattern (High Performance)
useEffect(() => {
const ctx = canvasRef.current.getContext('2d');
const unsubscribe = helios.subscribe((state) => {
// Draw directly without triggering React render
drawScene(ctx, state.currentFrame);
});
return unsubscribe;
}, []);
Source Files
- Example:
examples/react-canvas-animation/