Video cropper

The same cropper controls work on video.

Loading example...

Code

import { useState } from 'react'
import Cropper, { type Point } from 'react-easy-crop'

type VideoExampleProps = {
  video: string
}

export default function VideoExample({ video }: VideoExampleProps) {
  const [crop, setCrop] = useState<Point>({ x: 0, y: 0 })
  const [zoom, setZoom] = useState(1)

  return (
    <div className="cropper">
      <Cropper
        video={video}
        crop={crop}
        zoom={zoom}
        aspect={4 / 3}
        onCropChange={setCrop}
        onZoomChange={setZoom}
      />
    </div>
  )
}