react-image-crop

• Fix #491 (Tabbing to a drag handle which is on the edge can cause the crop media (e.g. image) to scroll slightly in the container - since the browser tries to make things which are tabbed to entirely visible)

No changes just a fix for SSR that was regressed in 10.0.1.

Trying to assign document to a variable on load caused issues with some SSR setups (e.g. NextJS). Now document is by default as a function that is evaluated during render to fix this.

If you wish to override document you can choose to keep it a function so that it works better with SSR:

class IframeReactCrop extends ReactCrop {
  get document() {
    return window.top.document
  }
}

• No change other than the ability to override document when using ReactCrop in an iframe. Fixes #482

class IframeReactCrop extends ReactCrop {
  constructor(props: ReactCropProps) {
    super(props)
    this.document = window.top.document
  }
}

No changes since beta. Refer to https://github.com/DominicTobias/react-image-crop/releases/tag/10.0.0-beta.0 for breaking changes

• max-height on ReactCrop works without needing to apply CSS on other elements

• Simplify and fix the calling of onComplete when a new crop is created (without user input)

• Fixed v10 regression relating to wrong pointer coords when web page is scrolled

• When setting an initial crop there was a possible race condition that would mean that the initial onComplete before user input might not get called

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

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

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

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

https://user-images.githubusercontent.com/760314/152597684-ac530422-3573-43bf-95be-c74ca2fe7073.mov

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

• 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.

• Just removing a console.log 🥲

• 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

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

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

• 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

This is a technical bug fix release to changes related to converting to Typescript. Versions 9.0.0 + 9.0.1 are deprecated.

This fixes the default export. Note there were more fixes to make so use 9.0.2.