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