Canvas Timeline
Function

TimelineProvider

Provides a TimelineEngine to React timeline hooks and components.

Usage notes

`TimelineProvider` is the bridge between the event-driven engine model and React layouts. It subscribes to settled state, selection, playback, content, and clipboard changes, then publishes lightweight TimelineState snapshots to descendants. Hooks such as useTimeline and useTimelineState must run inside this provider.

Signature

Type Definition
TimelineProvider(props: TimelineProviderProps): Element

Parameters

NameTypeDescription
propsTimelineProviderPropsProvider configuration and child tree.

Returns

Element

Examples

tsx Example
import { useMemo } from 'react';
import { TimelineEngine } from '@techsquidtv/canvas-timeline-core';
import {
  TimelineProvider,
  useTimelineState,
} from '@techsquidtv/canvas-timeline-react';
import { fromSeconds } from '@techsquidtv/canvas-timeline-utils';


function TrackCount() {
  const state = useTimelineState();


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


export function EditorShell() {
  const engine = useMemo(
    () =>
      new TimelineEngine({
        duration: fromSeconds(30),
        tracks: [],
      }),
    []
  );


  return (
    <TimelineProvider engine={engine}>
      <TrackCount />
    </TimelineProvider>
  );
}

Related links