react-image-crop

Note that you should use 9.0.2 (9.0.0 + 9.0.1 are deprecated due to some issues)

The library is now written in Typescript and comes with two breaking changes:

1. You should remove @types/react-image-crop as the library is now self-documenting.
2. If you were importing the .scss file, the path is now src/ReactCrop.scss instead of lib/ReactCrop.scss.

There are also two new props:

• scale: For zooming the image in and out. Defaults to 1. Combine with react-zoom-pan-pinch if you want pinch and scroll zooming.
• rotate: For rotating the image between -180 to 180. Defaults to 0.

• Fix dragging of crop on touch devices in React 17+ (regression) #405

You can ignore 8.6.11, it does no harm but doesn't fix the issue.

⚠️ Edit: This is a breaking change for some SASS users of ReactCrop.scss ⚠️
Apologies this should have been a breaking change. ReactCrop.scss is now compatible with https://www.npmjs.com/package/sass only, not with the deprecated packages node-sass or dart-sass which was done in the process of fixing deprecation warnings for #426
Alternatively if you aren't changing any SCSS variables you can import ReactCrop.css instead.

• Fixed "Minimum height/width not respected on mobile if user "taps" the image" #425
• Fixed deprecation warning when using new sass library #426
• Fixed scrolling window when dragging to move/resize crop on touch.
• Some internal changes to simplify/reduce some code.
• Removed support for proprietary IE .setActive function instead of .focus (IE support was dropped and not working properly for a while anyway).
• Switch to using pointer events instead of touch + mouse.

• Fix for touchmove event warnings on mobile #419

• Accidentally didn't publish /lib folder to NPM in 8.6.7 meaning that if you were importing the .scss file it would've broken. #418

• PR #417: Fix events so that they don't produce warnings in React 17 and potentially infinite loops in modals

• Allow keyboard nudging in diagonal directions #388
• Don't render selection addon if the crop is invalid #384

This release address three accessibility issues:

• Removes the tabIndex on the crop selection div in favor of the tabIndex on the root div. Apps can style the focus border as needed to provide a visual indicator that the cropper is selected.
• Increases the nudge step to 1px and the large nudge step to 10px to match better with other crop experiences.
• Renames nudgeStepLarge to nudgeStepMedium to allow adding a new variable for nudging with the cmd/ctrl key. When using the cmd/ctrl key nudge it will move the crop selection by 100px. This handles the keybindings based on the current platform so if mac is detected the cmd key will be used otherwise the ctrl key will be used.

Credits to @mskelton

• Remove code which was trying to detect invalid aspect crops. This was dangerous for percentage crops due to rounding %->pixel issues which made the crop hard to accurately validate and could cause infinite recursion. Now only crops which are missing a width or height are completed for you.
• Removing this code also fixes an issue when setting a crop minWidth/minHeight

Do not use this version, it has been deprecated due to a critical bug introduced.

• Fix resizing from an edge with aspect ratio percentage crop causing "Error: Maximum update depth exceeded." #347
• Fix the darkened background of the crop flickering off when resizing through 0,0

• Minor visual regression fix introduced in 8.6.0 when crop has 0,0 dimensions

• Fix #346 visual regression in 8.5.0 (background flicker) when crop size becomes 0

• Fix #345 dragging crop through 0,0 on mobile looses the crop and you have to start drawing again

• Potential fix for #324 where crop box can "reset" back to 0,0 position when touching an edge

• #342 Add back 4 side cropping on mobile with a new strategy to keep the corner boxes the same size and hide the others, but invisibly have a wider surface to drag from (defaults to 24px):

• Remove black background on crop component as this causes transparent images with black fills to be invisible #330

• Fixes issue of crop being incorrectly determined as invalid if there is margin/padding applied to the image element (P.S you shouldn't be doing this anyway) but also hopefully fixes hard to replicate issue #324

• Added event so that custom media (e.g. video) can inform the component when it's loaded so the component can render the initial crop #319 e.g.

<video
  onLoadStart={e => {
    // You must inform ReactCrop when your media has loaded.
    e.target.dispatchEvent(new Event('medialoaded', { bubbles: true }));
  }}

• Non functional change. lib was accidentally not published in 8.4.0 and 8.4.1 which contains the .scss file. Fixes #323

• Stop propagation of mouse down event in render selection addon so that inputs can be focusable. Fixes #321

• Crop is checked and corrected if invalid on every change. This makes setting aspect crops after the first load simpler especially when using % crops since you can only specify one of the dimensions and the other will be completed for you (now at any point).

• Fix crop flipping over when using min dimensions but not having enough space to satisfy said min dimensions #261

• Simplify resizing on touch devices to only have one resize handle on the inside which is a lot larger to make resizing easier #201

• Fix circular crop not being visible on dark backgrounds #297
• Fix crop flipping over when min dimensions are set and going beyond image area #300

• Edge case fix for IE11 scrolling #289
• [potentially breaking] Remove max-height: fill-available as it was causing the crop not to show when the container was flex or possibly grid. Feel free to add it in your own CSS if you were depending on it #296 #288