@editframe/react

React bindings for Editframe Elements.

Install

npm install @editframe/react

React 18 or later and react-dom are required. Importing the bindings also registers the Elements custom elements.

Composition props

Wrappers accept the underlying element's JavaScript properties, plus standard React props such as children, className, style, and ref. Use playbackRate for source speed and pass volumeAtTime as a function:

import { Configuration, Text, Timegroup, TimelineRoot, Video } from "@editframe/react";

const fade = (localTime: number) =>
  Math.max(0, Math.min(1, localTime / 0.25, (4 - localTime) / 0.25));

function Cut({ id }: { id: string }) {
  return (
    <Timegroup id={id} mode="fixed" duration="4s"
      style={{ position: "relative", width: 640, height: 360 }}>
      <Video src="/take.mp4" sourcein="2s" sourceout="10s"
        playbackRate={2} volume={0.8} volumeAtTime={fade}
        style={{ width: "100%", height: "100%" }} />
      <Text duration="4s"
        style={{ position: "absolute", top: 24, left: 24, lineHeight: 1.15 }}>
        A four-second cut
      </Text>
    </Timegroup>
  );
}

export function Composition() {
  return (
    <Configuration>
      <TimelineRoot id="cut" component={Cut} />
    </Configuration>
  );
}

This consumes eight source seconds in four composition seconds, preserving audio pitch. Supported playbackRate values are 0.25 through 4, with 1 as the default. Invalid property assignments throw RangeError. volumeAtTime receives clip-local composition seconds and returns a multiplier of volume from 0 to 1. The envelope is evaluated per audio sample during export. See the Elements README for trim rules and a render-clone export example.

TimelineRoot registers a React remount for exports and thumbnails, so React hooks and frame callbacks run in the render clone. Its component must render a Timegroup as its root. For playback, attach the mounted timegroup with an EFConfigurationElement ref's attachPlayback(root); Configuration alone does not attach a controller. A Workbench wrapper can attach playback automatically.

Configuration and Text accept ordinary JSX props and typed element refs directly in 0.60.34; no app-side re-typing is needed. Custom event handlers, such as Video's onReadyStateChange, retain their component-specific event types. Other element properties are accepted by name rather than individually type-checked; consult the underlying Elements class for the supported values.

See the documentation and the composition skill for more usage.