• Revert changes from 6.0.2 -> 6.0.3 which were to make it more convenient to create a client crop preview by calling onChange and onChangeComplete after onImageLoad. This meant that users couldn't make adjustments to the crop in onImageLoad as they were overwritten #223.

Now to make a client crop on the first load you should call your crop preview making function in onImageLoaded too. See https://codesandbox.io/s/72py4jlll6 for an example.

• Fixes major regression bug (infinite loop) introduced in 6.0.6. Rather than fixing the calc I introduced there I thought it would be more efficient and less risky to just remove it.

If you would like to programatically change the aspect ratio, you should also set the width or height to falsy if you would like the component to complete the crop for you:

// Setting an aspect but not a width or height (you must have ONE of them) will cause
// the component to complete the crop for you:
this.setState(state => ({
  crop: {
    ...state.crop,
    aspect: 16/9,
    height: null,
  },
}))

• Improves min size behaviour introduced in 6.0.5 so that in one drag if the pointer is brought back around and the resize becomes valid it will resize instead of remaining frozen.

• Fixed crop not updating when the user changes aspect (but not x, y, width or height). Also behaviour is changed so that if width and height are invalid for the aspect they are auto-adjusted. This makes controls to change the aspect more convenient. #133

• Fix minWidth/minHeight not being respected when flipping over near the image boundaries and not having enough space available (flip is prevented in that case). #206
• Added ability to specify own window and document if desired. #215

• Fix to last patch: only call onChange & onComplete on image load if the crop is valid

• Another improvement for making cropping on the client more simple: now if you pass a crop onChange and onComplete callbacks will be fired just after onImageLoaded in all situations (not just if using aspect crops).

• Patch release to change order of calls when using aspect crops - onImageLoaded is called before onChange and onComplete so that getting an image reference before making a crop on the client is more convenient in this situation. Note that if you set the image ref to state (which is probably unnecessary), then it won't exist by the time onChange and onComplete are called so it's recommended that you don't. Refer to the sandbox example if you're confused. #213

No functional changes, this is to fix some issues with importing the library.

• Remove jsnext:main as most compilers do not transpile node_modules and this was causing exceptions trying to read es6/7 code.
• Declare prop-types as an external peer dependency.

• Typescript package is installed alongside for you convenience
• Module is exported using ES6 exports to resolve eslint issues #178, TypeScript issue with needing to enable allowSyntheticDefaultImports, and to enable you to import non-default imports with braces {}. You should import the default export and any non-defaults in braces like this:

import ReactCrop, { getPixelCrop } from 'react-image-crop'

You shouldn't import the module like this unless you want all the exports in an object:

import * as ReactCrop from 'react-image-crop'

If you use this module globally via a <script> tag, you should now use ReactCrop.Component instead of just ReactCrop.

• makeAspectCrop is no longer necessary, simply pass your incomplete crop (missing width or height) and onChange will be called with the completed crop for you to set to state. 🎉
• Fix exception caused by 4.0.4 change when not initially passing a crop #193
• Fix long-standing issue of crop continuing to move upwards once it's already hit the image boundary and dragging continues when in fixed aspect mode dragging NE or NW handle.

Breaking changes:

• Exported function containCrop now takes previousCrop as the first parameter. containCrop(previousCrop, crop, imageAspect).

• Add pixelCrop to onImageLoaded #192.
• Add className prop #171.

• Fix to global/window export. Regression fix from 4.0.2 regarding how the module was exported specifically if you were consuming this module as a global (e.g. from a CDN).

• Add image onError handler onImageError (#185)
• Add valid aspect check in makeAspectCrop (#186)
• Fix autoprefixer warning (#176)

• Use css stretch property rather than deprecated fill-available for image max-height

• Fixed clicking/touching an unfocused cropping image causing a scroll jump in certain situations #173
• $mobile-media-query is now (max-width: 768px), (pointer: coarse) by default which catches modern touch devices above 768px.
• The cropped image has a max-height: fill-available so that the image is contained by it's container's height as well as width (in modern browsers) #174

Note: This release is only a breaking change if you've overridden the $mobile-media-query scss variable, due to it now being the whole query instead of just a single value without brackets (max-width: 768px).

• Fixed pixelCrop sometimes exceeding the bounds of the image due to number rounding. getPixelCrop(image, percentCrop) is also now exposed for some edge use cases. #167

Fixes

• Set { passive: false } to prevent some modern mobile browsers from defaulting it to true and breaking the use of event.preventDefault #157

• Add !default to SASS variables to make them overridable #151 #153
• Fix hard-coded 2px offset on drag handle position calc, so that changing drag-bar size using variables keeps them centred #152

Fixes

• Ensure wide images work with makeAspectCrop #144

Features

• Allowed custom styles on image and wrapper elements #141
• Expose method to contain crop to image boundaries #145