Canvas Timeline

React Registry

hookTimeline State@techsquidtv/canvas-timeline-react/hooks

Timeline State

Hooks for reading the TimelineEngine, state snapshot, and active layers.

3 tracks3 active clipsLayers active72 px/s

State readout preview

A small status view for tracks, active clips, selected media, and engine state.

Installation

pnpm
pnpm add @techsquidtv/canvas-timeline-react
  1. 1

    Install the package.

    The command above adds the React bindings and their package dependencies.

  2. 2

    Import from the React entrypoint.

    @techsquidtv/canvas-timeline-react/hooks

Usage

TimelineSummary.tsx
import {
  useTimeline,
  useTimelineState,
} from '@techsquidtv/canvas-timeline-react/hooks';


export function TimelineSummary() {
  const { engine } = useTimeline();
  const state = useTimelineState();


  return <span>{state.tracks.length} tracks</span>;
}

Notes

  • Call these hooks inside components wrapped by TimelineProvider.

API Reference

Timeline State

Hooks for reading the TimelineEngine, state snapshot, and active layers.

Exports

context
NameReferenceDescription
useTimelineAPI referenceReads the shared engine and synchronized timeline state from context.
state
NameReferenceDescription
useTimelineStateAPI referenceReads the current reactive TimelineState snapshot.
active state
NameReferenceDescription
useActiveClipsAPI referenceReturns clips active at the current playhead time.
useActiveLayersAPI referenceReturns active layers grouped for preview and playback surfaces.
viewport
NameReferenceDescription
useTimelineViewportAPI referenceReturns canonical viewport metrics and setters for custom chrome.
useTimelineZoomScaleAPI referenceSubscribes to the current zoom scale without pulling the full viewport object.
useTimelineScrollLeftAPI referenceSubscribes to the current horizontal scroll offset.
useTimelineScrollTopAPI referenceSubscribes directly to live vertical scroll offset changes.
events
NameReferenceDescription
useTimelineEventAPI referenceSubscribes to typed TimelineEngine events with a React-safe handler.
geometry
NameReferenceDescription
useTimelineClipRectsAPI referenceReturns viewport-space clip rectangles for inspectors, minimaps, and custom renderers.
useTimelineVisibleClipsAPI referenceReturns viewport-intersecting clips with clipped timeline and source ranges.
useTimelineRulerTicksAPI referenceReturns shared ruler tick positions and labels for custom ruler surfaces.
useTimelineTimePositionAPI referenceProjects a timeline time into viewport x-position and formatted labels.
keyframe editing
NameReferenceDescription
useTimelineKeyframesAPI referenceReads clip keyframes, viewport geometry, evaluation helpers, and keyframe commands.
useTimelineKeyframeCurvesAPI referenceReads keyframe curve segment geometry, Bezier handles, and easing commands.