TimelineProvider (react) API

Usage notes

`TimelineProvider` is the bridge between the event-driven engine model and React layouts. It provides a stable engine reference; consuming hooks subscribe to the state fields they need. Command-only consumers can use useTimelineEngine without subscribing to state. 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