React Components

Editframe provides React wrapper components for all core elements, allowing you to use Editframe in React applications with full TypeScript support and React-friendly APIs.

Architecture

The React components are thin wrappers around the underlying web components, providing:

• TypeScript type definitions
• React-friendly prop names (camelCase instead of kebab-case)
• Ref forwarding for direct DOM access
• Event handler props
• Children support

Available Components

Core Elements

• <Timegroup> - Timeline container
• <Video> - Video element
• <Audio> - Audio element
• <Image> - Image element
• <Waveform> - Audio waveform visualization
• <Captions> - Text captions with timing
  • <CaptionsActiveWord> - Current word
  • <CaptionsBeforeActiveWord> - Previous words
  • <CaptionsAfterActiveWord> - Upcoming words
  • <CaptionsSegment> - Caption segment
• <Surface> - Canvas surface for video
• <ThumbnailStrip> - Video thumbnail timeline

GUI Components

• <Configuration> - API configuration
• <Workbench> - Editor workspace
• <Preview> - Preview container
• <Controls> - Remote control bridge
• <Filmstrip> - Timeline visualization
• <Scrubber> - Timeline scrubber
• <TimeDisplay> - Time display
• <TogglePlay> - Play/pause button
• <ToggleLoop> - Loop toggle button
• <FitScale> - Auto-scaling container
• <FocusOverlay> - Focus indicator
• <ResizableBox> - Resizable bounding box
• <Dial> - Rotational input
• <EasingEditor> - Easing function editor
• <MotionPathEditor> - Motion path editor
• <BezierCurveEditor> - Bezier curve editor
• <PathPoint> - Path point component

Basic Usage

import { Timegroup, Video, Audio, Image } from '@editframe/react';

function MyVideoEditor() {
  return (
    <Timegroup mode="sequence" className="w-[1920px] h-[1080px]">
      <Video src="/intro.mp4" />
      <Image src="/title.jpg" duration="3s" />
      <Video src="/main.mp4" />
      <Audio src="/music.mp3" />
    </Timegroup>
  );
}

TypeScript Support

All components have full TypeScript definitions:

import { Timegroup, Video, type TimegroupProps } from '@editframe/react';

const MyTimeline: React.FC<{ mode: TimegroupProps['mode'] }> = ({ mode }) => {
  return (
    <Timegroup mode={mode} className="w-[1920px] h-[1080px]">
      <Video src="/video.mp4" trimStart="2s" trimEnd="3s" />
    </Timegroup>
  );
};

Props vs Attributes

React props are automatically converted to web component attributes:

| React Prop | Web Component Attribute | |------------|-------------------------| | trimStart | trimstart | | trimEnd | trimend | | sourceIn | sourcein | | sourceOut | sourceout | | assetId | asset-id | | apiHost | api-host |

Ref Handling

Access the underlying web component using refs:

import { useRef } from 'react';
import { Timegroup } from '@editframe/react';

function MyComponent() {
  const timegroupRef = useRef<HTMLElement>(null);
  
  const handleClick = () => {
    if (timegroupRef.current) {
      // Access web component properties
      console.log(timegroupRef.current.durationMs);
      // Call web component methods
      timegroupRef.current.play();
    }
  };
  
  return (
    <Timegroup ref={timegroupRef} mode="contain">
      {/* content */}
    </Timegroup>
  );
}

Event Handling

React components support standard React event props:

<Video 
  src="/video.mp4"
  onLoad={() => console.log('Video loaded')}
  onError={(e) => console.error('Error:', e)}
/>

Children

React components support children just like HTML elements:

<Timegroup mode="sequence">
  <Video src="/video1.mp4" />
  <div className="title">My Title</div>
  <Video src="/video2.mp4" />
</Timegroup>

SSR Compatibility

The React components work with Server-Side Rendering, but note that web components only initialize in the browser:

'use client'; // Next.js App Router

import { Timegroup, Video } from '@editframe/react';

export default function VideoPlayer() {
  return (
    <Timegroup mode="contain" className="w-[1920px] h-[1080px]">
      <Video src="/video.mp4" />
    </Timegroup>
  );
}

Examples

Simple Video Player

import { Preview, Timegroup, Video, TogglePlay, Scrubber } from '@editframe/react';

export function SimplePlayer() {
  return (
    <Preview>
      <Timegroup mode="contain" className="w-[1920px] h-[1080px] bg-black">
        <Video src="/video.mp4" className="w-full h-full object-contain" />
      </Timegroup>
      
      <div className="controls">
        <TogglePlay>
          <button slot="play">Play</button>
          <button slot="pause">Pause</button>
        </TogglePlay>
        <Scrubber />
      </div>
    </Preview>
  );
}

Video Editor

import { 
  Configuration, 
  Workbench, 
  Timegroup, 
  Video, 
  Filmstrip,
  TogglePlay,
  Scrubber,
  TimeDisplay
} from '@editframe/react';

export function VideoEditor() {
  return (
    <Configuration apiHost="https://api.editframe.com">
      <Workbench>
        <Timegroup slot="canvas" mode="sequence" className="w-[1920px] h-[1080px]">
          <Video src="/clip1.mp4" />
          <Video src="/clip2.mp4" />
          <Video src="/clip3.mp4" />
        </Timegroup>
        
        <div slot="timeline" className="p-4">
          <div className="flex items-center gap-4 mb-4">
            <TogglePlay>
              <button slot="play">▶</button>
              <button slot="pause">⏸</button>
            </TogglePlay>
            <Scrubber className="flex-1" />
            <TimeDisplay />
          </div>
          <Filmstrip />
        </div>
      </Workbench>
    </Configuration>
  );
}

With State Management

import { useState } from 'react';
import { Timegroup, Video } from '@editframe/react';

export function DynamicVideo() {
  const [videos, setVideos] = useState(['/video1.mp4', '/video2.mp4']);
  
  return (
    <Timegroup mode="sequence" className="w-[1920px] h-[1080px]">
      {videos.map((src, index) => (
        <Video key={index} src={src} />
      ))}
    </Timegroup>
  );
}

Installation

npm install @editframe/react

Importing

// Import individual components
import { Timegroup, Video, Audio } from '@editframe/react';

// Import types
import type { TimegroupProps, VideoProps } from '@editframe/react';

// Import hooks
import { useTimingInfo } from '@editframe/react';

Next Steps

• Hooks Documentation - React hooks for timing and state
• Core Elements - Web component documentation
• Editor UI - Editor component documentation

Related Resources

• React Web Components(opens in a new tab) - Official React documentation on web components
• @lit/react(opens in a new tab) - Lit's React integration (used internally)