React Timeline Trackpad

A React component for timeline-based video/audio editing with drag-and-drop functionality.

Installation

npm install react-timeline-trackpad

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom @dnd-kit/core@^6.3.1 @dnd-kit/sortable@^10.0.0 @dnd-kit/utilities@^3.2.0 uuid@^9.0.0

Usage

Basic Usage

import { TimelineTrackpad } from 'react-timeline-trackpad';
import 'react-timeline-trackpad/styles.css';

function App() {
  return <TimelineTrackpad />;
}

With Theme

import { TimelineTrackpad, type Theme } from 'react-timeline-trackpad';
import 'react-timeline-trackpad/styles.css';

function App() {
  const [theme, setTheme] = useState<Theme>('dark');
  
  return (
    <>
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
        Toggle Theme
      </button>
      <TimelineTrackpad theme={theme} />
    </>
  );
}

Features

• Drag and drop clips between tracks
• Resize clips by dragging handles
• Snap to grid for precise positioning
• Support for audio, video, and image clips
• Audio waveform visualization
• Video thumbnail preview

Types

All types are exported from the package:

import type { 
  Clip, 
  TrackData, 
  Placeholder, 
  Emitter,
  Theme,
  ThemeColors,
  TimelineTrackpadProps
} from 'react-timeline-trackpad';

Themes

The component supports both light and dark themes:

• Dark theme (default): Modern dark interface with blue accents
• Light theme: Clean light interface with subtle shadows

Pass the theme prop to TimelineTrackpad to switch between themes:

• theme="dark" - Dark theme
• theme="light" - Light theme

The theme colors are defined in CSS variables and can be customized by overriding the CSS variables in your stylesheet.

License

MIT