Canvas Timeline

React Registry

componentVertical Scrollbar@techsquidtv/canvas-timeline-react

Vertical Scrollbar

A timeline adapter that maps range scrollbar changes to vertical track scrolling.

Vertical scrollbar preview

Track-stack scroll controls wired to scrollTop.

Open full demo

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
  3. 3

    Add the timeline styles.

    Use the full stylesheet with shadcn-compatible tokens, or base.css when your app owns the visual theme.

    Default visuals
    import '@techsquidtv/canvas-timeline-react/styles.css';
    Base geometry
    import '@techsquidtv/canvas-timeline-react/base.css';

Usage

TimelineVerticalScrollbar.tsx
import { useMemo } from 'react';
import { TimelineEngine } from '@techsquidtv/canvas-timeline-core';
import { Timeline, TimelineProvider } from '@techsquidtv/canvas-timeline-react';


const tracks = Array.from({ length: 8 }, (_, index) => ({
  id: `track-${index + 1}`,
  kind: 'visual',
  clips: [],
  selected: false,
  locked: false,
  muted: false,
  visible: true,
}));


export function TimelineVerticalScrollbar() {
  const engine = useMemo(() => new TimelineEngine({ tracks }), []);


  return (
    <TimelineProvider engine={engine}>
      <div className="grid h-80 grid-cols-[minmax(0,1fr)_auto]">
        <Timeline.Root>
          <Timeline.TrackList>
            {tracks.map((track) => (
              <Timeline.Track key={track.id} trackId={track.id} />
            ))}
          </Timeline.TrackList>
        </Timeline.Root>


        <Timeline.VerticalScrollbar>
          <Timeline.VerticalScrollbarThumb>
            <Timeline.VerticalScrollbarHandle side="start" />
            <Timeline.VerticalScrollbarHandle side="end" />
          </Timeline.VerticalScrollbarThumb>
        </Timeline.VerticalScrollbar>
      </div>
    </TimelineProvider>
  );
}

Notes

  • Render these components inside a TimelineProvider so they can read the shared TimelineEngine.
  • Import @techsquidtv/canvas-timeline-react/styles.css when your app defines shadcn-compatible semantic tokens, or base.css when supplying your own theme.
  • CSS styles interaction layers; renderer theme styles canvas-painted timeline visuals.
  • Use the theming guide when CSS tokens should drive canvas-painted colors.
  • The vertical scrollbar reads viewportHeight, maxScrollTop, and scrollTop from the shared TimelineEngine.
  • Dragging the thumb pans with engine.setScrollTop(); dragging either handle scales expanded track heights for vertical zoom.
  • Mount Timeline.Root in the same TimelineProvider so the engine knows the measured viewport height used for vertical scroll bounds.
  • Use Timeline.ViewportScrollbar for horizontal time panning and time zoom; use VerticalScrollbar for track-stack panning and row-height zoom.

API Reference

Vertical Scrollbar

A timeline adapter that maps range scrollbar changes to vertical track scrolling.

Exports

NameReferenceDescription
Timeline.VerticalScrollbarAPI referenceTimeline-aware root that adapts the generic range scrollbar to scrollTop.
Timeline.VerticalScrollbarThumbAPI referenceDraggable thumb representing the visible track stack.
Timeline.VerticalScrollbarHandleAPI referenceRange handle for custom vertical range compositions.
useTimelineVerticalScrollbarAPI referenceHook that derives range scrollbar props from vertical timeline viewport state.
useTimelineVerticalRangeControlAPI referenceAdds formatted ARIA values to the vertical scrollbar adapter.
useTimelineScrollTopAPI referenceSubscribes directly to live vertical scroll offset changes.