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 {
  useTimelineEngine,
  useTimelineState,
} from '@techsquidtv/canvas-timeline-react/hooks';


export function TimelineSummary() {
  const engine = useTimelineEngine();
  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

state
NameReferenceDescription
useTimelineSelectorAPI referenceSelects primitive or object values from readonly settled state with configurable equality.
useTimelineStateAPI referenceReads the current reactive TimelineState snapshot.
context
NameReferenceDescription
useTimelineEngineAPI referenceReads the stable engine without subscribing to state changes.
useTimelineAPI referenceReads the shared engine and subscribes to the timeline state 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.
useTimelineViewportBoundsAPI referenceObserves content, scroll, and zoom limits as content, dimensions, or policy change.
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.
geometry
NameReferenceDescription
useTimelineTrackGeometryAPI referenceShares reactive viewport-space row geometry across consumers with the same layout.
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 referenceUpdates a DOM element transform imperatively from timeline time.
events
NameReferenceDescription
useTimelineEventAPI referenceSubscribes to typed TimelineEngine events with a React-safe handler.
keyframe editing
NameReferenceDescription
useTimelineKeyframesAPI referenceReads settled clip keyframes, selection, evaluation helpers, and keyframe commands.
useTimelineKeyframeGeometryAPI referenceReads live keyframe rectangles scoped by clip and property for custom overlays.
useTimelineKeyframeSegmentsAPI referenceReads keyframe segment geometry, Bezier tangent handles, and side commands.