react-video-trimmer-rail

A React component for selecting a video time range (start and end in seconds) on a draggable thumbnail rail.

Important

This package does not render or export a trimmed video file.

It only returns startSec and endSec via onConfirm. Actual trimming (e.g. with FFmpeg, MediaRecorder, or a backend service) must be implemented in your application.

The video preview and thumbnail generation exist only for range-selection UX.

Install

npm install react-video-trimmer-rail

Peer dependencies:

• react >= 17
• react-dom >= 17

Styles (after publish):

import 'react-video-trimmer-rail/style.css'

Quick start

import VideoTrimmer from 'react-video-trimmer-rail'
import 'react-video-trimmer-rail/style.css'

function App() {
  const [open, setOpen] = useState(true)

  if (!open) return null

  return (
    <VideoTrimmer
      videoUrl={URL.createObjectURL(file)}
      maxDurationSec={30}
      onConfirm={(startSec, endSec) => {
        console.log('trim range:', startSec, endSec)
        setOpen(false)
        // Trim the video here with FFmpeg or your own API
      }}
      onCancel={() => setOpen(false)}
      labels={{
        back: 'Back',
        confirm: 'Confirm',
        trimStart: 'Start',
        trimEnd: 'End',
      }}
    />
  )
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | videoUrl | string | required | Video source (blob URL, public URL, etc.) | | maxDurationSec | number | 30 | Maximum selectable clip length (seconds) | | minClipSec | number | 1 | Minimum clip length (seconds) | | thumbCount | number | 10 | Number of frames on the thumbnail rail | | labels | object | English | Button and aria text — keys: back, confirm, trimStart, trimEnd | | showPreview | boolean | true | Full-screen preview; if false, video stays hidden (thumbnails only) | | className | string | '' | Extra class on the root element | | style | object | — | Inline styles on the root element | | onConfirm | (startSec, endSec) => void | — | Called when the range is confirmed | | onCancel | () => void | — | Called when the user cancels | | renderHeader | function | — | Custom header; receives { labels, thumbsLoading, duration, startTrim, endTrim, onConfirm, onCancel } |

labels (optional)

{
  back?: string
  confirm?: string
  trimStart?: string
  trimEnd?: string
}

Helper export

import { bindVideoTrimLoop } from 'react-video-trimmer-rail'

// Loop playback between start and end on a <video> element
const unbind = bindVideoTrimLoop(videoElement, startSec, endSec)
unbind() // cleanup

Styling

CSS variables on the root:

.video-trimmer-rail {
  --vtr-selection-color: #ffd60a;
  --vtr-handle-color: #ffd60a;
}

Or use renderHeader for custom buttons (e.g. Material UI, icons).

License

MIT