A responsive image cropping tool for React
ISC License
Published by DominicTobias almost 6 years ago
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.
Published by DominicTobias almost 6 years ago
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,
},
}))
Published by DominicTobias almost 6 years ago
Published by DominicTobias almost 6 years ago
Published by DominicTobias almost 6 years ago
window
and document
if desired. #215Published by DominicTobias almost 6 years ago
onChange
& onComplete
on image load if the crop is validPublished by DominicTobias about 6 years ago
onChange
and onComplete
callbacks will be fired just after onImageLoaded
in all situations (not just if using aspect crops).Published by DominicTobias about 6 years ago
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. #213Published by DominicTobias about 6 years ago
No functional changes, this is to fix some issues with importing the library.
jsnext:main
as most compilers do not transpile node_modules and this was causing exceptions trying to read es6/7 code.prop-types
as an external peer dependency.Published by DominicTobias about 6 years ago
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
.
Published by DominicTobias about 6 years ago
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. 🎉Breaking changes:
containCrop
now takes previousCrop
as the first parameter. containCrop(previousCrop, crop, imageAspect)
.Published by DominicTobias about 6 years ago
pixelCrop
to onImageLoaded
#192.className
prop #171.Published by DominicTobias about 6 years ago
Published by DominicTobias about 6 years ago
onImageError
(#185)Published by DominicTobias over 6 years ago
stretch
property rather than deprecated fill-available
for image max-heightPublished by DominicTobias over 6 years ago
$mobile-media-query
is now (max-width: 768px), (pointer: coarse)
by default which catches modern touch devices above 768px.max-height: fill-available
so that the image is contained by it's container's height as well as width (in modern browsers) #174Note: 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
).
Published by DominicTobias over 6 years ago
pixelCrop
sometimes exceeding the bounds of the image due to number rounding. getPixelCrop(image, percentCrop)
is also now exposed for some edge use cases. #167Published by DominicTobias almost 7 years ago
{ passive: false }
to prevent some modern mobile browsers from defaulting it to true and breaking the use of event.preventDefault
#157Published by DominicTobias almost 7 years ago
!default
to SASS variables to make them overridable #151 #153Published by DominicTobias almost 7 years ago