TimelineProvider API

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

TimelineProvider(props: TimelineProviderProps): Element

Parameters

Name	Type	Description
props	TimelineProviderProps	Provider configuration and child tree.

Returns

Element

Examples

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>
  );
}

- TimelineEngine - TimelineState - React editor hooks