Basic cropper

Image cropper with controlled crop and zoom.

Loading example...

Code

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

type BasicExampleProps = {
  image: string
}

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

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

      <label>
        Zoom
        <input
          type="range"
          min="1"
          max="3"
          step="0.1"
          value={zoom}
          onChange={(event) => setZoom(Number(event.target.value))}
        />
      </label>
    </>
  )
}