@videoflow/react-video-editor
Drop-in multi-track editor React component.
Functions
useEditor
(selector: (state: EditorState) => T): TSubscribe to the entire editor state. Prefer the narrower hooks below.
Parameters
| Name | Type | Description |
|---|---|---|
selector | (state: EditorState) => T |
Returns
TuseHistoryState
(): { canRedo: boolean; canUndo: boolean }Undo / redo availability.
Returns
{ canRedo: boolean; canUndo: boolean }usePlayhead
(): { frame: number; playing: boolean }Current timeline frame and playing flag.
Returns
{ frame: number; playing: boolean }useSelection
(): { ids: string[]; layers: LayerJSON[] }The selected layer ids and their resolved `LayerJSON` objects.
Returns
{ ids: string[]; layers: LayerJSON[] }useVideo
(): VideoJSONThe currently-loaded `VideoJSON`.
Returns
VideoJSONuseViewport
(): ViewportTimeline viewport (zoom / scroll).
Returns
ViewportVideoEditor
(__namedParameters: VideoEditorProps): ElementParameters
| Name | Type | Description |
|---|---|---|
__namedParameters | VideoEditorProps |
Returns
ElementType aliases
EditorState
type EditorState = OnUploadCallback
Signature for the user-supplied asset upload callback. The editor calls this whenever a user drops a file into the preview or timeline (or picks one via the inspector). The default implementation just wraps the file in `URL.createObjectURL` so imports work locally out of the box; host apps that want persistent storage should override it.
type OnUploadCallback = (file: File) => Promise<string>Selection
Editor-side selection state. Layer ids only — resolve to `LayerJSON` objects via `video.layers.find(...)` at the call site.
type Selection = VideoEditorProps
type VideoEditorProps = Viewport
Viewport state for the preview / timeline. Zoom and pan are editor-local (never persisted back into the VideoJSON).
type Viewport = Variables
useEditorStore
const useEditorStore: UseBoundStore<StoreApi<EditorState>>