10.0.0-beta.0

⚠️ Breaking changes for all users

Over the years this library had become hard to maintain. This release inverts some control to the user (breaking changes for all) which reduces the amount of props needed.

This release contains extensive refactoring (hence beta status for now). All functionality is still possible except for two rarely used props.

❌ Removed props (but still possible, read more below):

• crossorigin
• imageAlt
• onImageError
• onImageLoaded
• renderComponent
• rotate
• scale

These rarely used props are completely removed as they were buggy but too complex for me to maintain. If you still want them then use v9:

• zoom 💀
• spin 💀

✅ Added props

Since there is no longer such a thing as a partial/incomplete crop (you must ALWAYS pass in a crop with all props (unit, x, y, width, height or NOT AT ALL) it made sense to move aspect out into a prop, so that to start with no crop you simply omit the crop prop or pass undefined:

• aspect (was previously inside the crop object)

So what does it look like?

It's up to you to now render whatever you want as children of ReactCrop:

const [crop, setCrop] = useState<Crop>()
return (
  <ReactCrop crop={crop} aspect={16 / 9} onChange={c => setCrop(c)}>
    <img src={src} />
  </ReactCrop>
)

See advanced demo on CodeSandbox

All those removed props mentioned before e.g. crossorigin and imageAlt can be added by you:

<ReactCrop crop={crop} aspect={16 / 9} onChange={c => setCrop(c)}>
  <img src={src} crossorigin="anonymous" alt="Crop this image" />
</ReactCrop>

Even rotate and scale are just CSS properties:

<img src={src} crossorigin="anonymous" alt="Crop this image" style={{ transform: `scale(${scale}) rotate(${rotate}deg)` }} />

As mentioned you either have a crop or not. ⚠️ Don't pass in a crop that doesn't have a width for example (unlike before). Since making aspect crops with percentages is a little tricky you can use the makeAspectCrop(crop: Partial<Crop>, aspect: number, containerWidth: number, containerHeight: number) helper. For example to start with a centered landscape crop:

import ReactCrop, { Crop, centerCrop, makeAspectCrop } from 'react-image-crop'

const [crop, setCrop] = useState<Crop>()

function onImageLoad(e) {
  const { width, height } = e.currentTarget

  const crop = centerCrop(
    makeAspectCrop(
      {
        // You don't need to pass a complete crop into
        // makeAspectCrop or centerCrop
        unit: '%',
        width: 90,
      },
      16 / 9,
      width,
      height
    ),
    width,
    height
  )

  this.setState({ crop })
}

return (
  <ReactCrop crop={crop} aspect={16 / 9} onChange={c => setCrop(c)}>
    <img src={src} onLoad={onImageLoad} />
  </ReactCrop>
)