React Timeline Trackpad

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

Installation

``bash
npm install react-timeline-trackpad
`

$3

This package requires the following peer dependencies:

`bash
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

$3

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

function App() {
return ;
}
`

$3

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

function App() {
const [theme, setTheme] = useState('dark');

return (
<>
setTheme(theme === 'dark' ? 'light' : 'dark')}>
Toggle 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:

`tsx
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