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 lean viewport range scrollbar adapter.
useTimelineViewportScrollbarAPI referenceDerives generic range scrollbar props from timeline viewport state.
useTimelineVerticalRangeControlAPI referenceAdds formatted ARIA values to the vertical track-stack scrollbar adapter.
useTimelineVerticalScrollbarAPI referenceDerives generic range scrollbar props from vertical track viewport state.
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.