A responsive image cropping tool for React
ISC License
Published by DominicTobias over 2 years ago
Published by DominicTobias over 2 years ago
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
}
}
Published by DominicTobias over 2 years ago
document
when using ReactCrop in an iframe. Fixes #482class IframeReactCrop extends ReactCrop {
constructor(props: ReactCropProps) {
super(props)
this.document = window.top.document
}
}
Published by DominicTobias over 2 years ago
No changes since beta. Refer to https://github.com/DominicTobias/react-image-crop/releases/tag/10.0.0-beta.0 for breaking changes
Published by DominicTobias over 2 years ago
max-height
on ReactCrop works without needing to apply CSS on other elementsPublished by DominicTobias over 2 years ago
onComplete
when a new crop is created (without user input)Published by DominicTobias over 2 years ago
Published by DominicTobias over 2 years ago
onComplete
before user input might not get calledPublished by DominicTobias over 2 years ago
Some minor fixes:
makeAspectCrop
returns a crop of the passed in unitonComplete
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 inputPublished by DominicTobias over 2 years ago
⚠️ 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):
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:
✅ 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
:
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>
)
Published by DominicTobias over 2 years ago
Published by DominicTobias over 2 years ago
https://user-images.githubusercontent.com/760314/152597684-ac530422-3573-43bf-95be-c74ca2fe7073.mov
Published by DominicTobias over 2 years ago
Published by DominicTobias over 2 years ago
Published by DominicTobias over 2 years ago
Published by DominicTobias almost 3 years ago
Published by DominicTobias about 3 years ago
Published by DominicTobias about 3 years ago
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. #436Published by DominicTobias about 3 years ago
This is a technical bug fix release to changes related to converting to Typescript. Versions 9.0.0 + 9.0.1 are deprecated.
Published by DominicTobias about 3 years ago
This fixes the default export. Note there were more fixes to make so use 9.0.2.