Canvas Timeline

React Registry

hookAccessible Controls@techsquidtv/canvas-timeline-react/hooks

Accessible Controls

Hook-first control adapters for Base UI sliders, viewport scrollbars, and constant-DOM clip navigation.

7 seconds72 pixels per secondIntro sequence on Video A

Accessible controls preview

Base UI-compatible control props and formatted ARIA values for editor chrome.

Open full demo

Installation

pnpm
pnpm add @techsquidtv/canvas-timeline-react @base-ui/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

AccessibleTimelineControls.tsx
import { Slider } from '@base-ui/react/slider';
import {
  useTimelineClipNavigation,
  useTimelinePlayheadControl,
} from '@techsquidtv/canvas-timeline-react/hooks';


export function AccessibleTimelineControls() {
  const playhead = useTimelinePlayheadControl();
  const clips = useTimelineClipNavigation();


  return (
    <>
      <Slider.Root {...playhead.rootProps}>
        <Slider.Control>
          <Slider.Track>
            <Slider.Indicator />
            <Slider.Thumb {...playhead.thumbProps} />
          </Slider.Track>
        </Slider.Control>
      </Slider.Root>
      <div {...clips.focusTargetProps}>{clips.activeClip?.name}</div>
    </>
  );
}

Notes

  • These hooks are scoped to focused elements or returned commands; they do not install global keyboard listeners.
  • Use domain hooks such as useTimelinePlayback and useTimelineViewport for toolbar actions; use these adapters when composing semantic controls from Base UI or the range scrollbar primitive.
  • useTimelineClipNavigation keeps clips canvas-rendered and exposes one active item instead of one DOM node per clip.

API Reference

Accessible Controls

Hook-first control adapters for Base UI sliders, viewport scrollbars, and constant-DOM clip navigation.

Exports

control adapter
NameReferenceDescription
useTimelinePlayheadControlAPI referenceReturns Base UI-compatible playhead slider props and formatted value text.
useTimelineInOutRangeControlAPI referenceReturns Base UI-compatible In/Out range props and thumb labels.
useTimelineViewportRangeControlAPI referenceAdds formatted ARIA values to the lightweight viewport range scrollbar adapter.
useTimelineVerticalRangeControlAPI referenceAdds formatted ARIA values to the vertical track-stack scrollbar adapter.
useTimelineZoomControlAPI referenceReturns Base UI-compatible zoom slider props and formatted value text.
useTimelinePanControlAPI referenceReturns Base UI-compatible horizontal pan slider props and value text.
navigation
NameReferenceDescription
useTimelineClipNavigationAPI referenceExposes one active canvas clip, navigation commands, and focus target props.
keyboard
NameReferenceDescription
useTimelineKeyboardAPI referenceReturns focus-scoped shortcut props for opt-in timeline keyboard commands.