Round crop area

Avatar-style cropper without grid lines.

Loading example...

Code

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

type RoundExampleProps = {
  image: string
}

export default function RoundExample({ image }: RoundExampleProps) {
  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={1}
        cropShape="round"
        showGrid={false}
        onCropChange={setCrop}
        onZoomChange={setZoom}
      />
    </div>
  )
}