10.0.0-beta.1

Some minor fixes:

• makeAspectCrop returns a crop of the passed in unit
• onComplete is fired when going from no crop to a crop, this makes it easier to show a crop preview when making an initial crop without user input

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>
)

9.1.1

• Don't refactor main crop resize containment yet as there are some edge cases to deal with

9.1.0

• Add keyboard support for resizing the crop (thanks to @ccveer )

Screen.Recording.2022-02-04.at.20.17.44.mov

• Internal: significant re-write of some crop containment logic. While there shouldn't be breaking changes proceed with caution.

9.0.8

• One more adjustment to crop containing logic so that the crop cannot get nudged from it's position when resizing and hitting a boundary very fast. Hopefully the containment logic is finally perfect in all scenarios.

9.0.7

• Just removing a console.log 🥲

9.0.6

• Refactor logic to keep aspect crops in bounds to fix buggy behaviour when resizing: SW against bottom bound, NW handle against left bound, NE handle against right bound

9.0.5

• Fix width expanding when hitting left boundary on free-form crop #452

9.0.4

• Non-functional Typescript improvements (#439 + #440)

9.0.3

• Add spin prop. A non-visual prop to keep pointer coords accurate when a parent element is rotated. Not to be confused with the rotate prop which rotates the image itself. Defaults to 0, range is from -180 to 180. This behaviour is typically found in an image editing app when rotating both the image and the crop. #436