Allow padding to the crop area about react-easy-crop HOT 5 CLOSED

Just adding a prop adds a maintenance cost and isn't this simple as we would need to add an extra div.

I prefer not to add it and have this issue serve as an example.

from react-easy-crop.

This can probably be done outside of the library by adding padding to the parent container and moving the "overflow: hidden" one level up.

from react-easy-crop.

This can probably be done outside of the library by adding padding to the parent container and moving the "overflow: hidden" one level up.

Can you share a working example of this? I've been playing with CSS and the HTML structure around the cropper and haven't managed to actually get said padding.

I will note that, if I put an image that is SMALLER than the Cropper component, there will be padding by default, as the Crop Area will fit the dimensions of the image and not the cropper. This is rather inconsistent, and I'd say undesired behaviour.

from react-easy-crop.

I'm not sure if this matches your expectations but here's an example I just created: https://codesandbox.io/p/sandbox/wonderful-elbakyan-pgcfzc?file=%2Fsrc%2Fstyles.css
See the comments in the css file.

from react-easy-crop.

Had to do some slight adjustments to my specific use case, but it did reach the results I was hoping for! I'd still advocate for including it directly in the library as a prop, as I imagine this should be a "enough" commonly needed feature.

For future reference, here's my code that achieved the desired results, wrapped in Mui elements:

<Box
  sx={{
    padding: '100px',
    overflow: 'hidden',
    display: 'flex',
    alignItems: 'stretch',
    justifyContent: 'stretch',
    width: '100%',
    height: '100%',
  }}
>
  <Box sx={{ position: 'relative', width: '100%', height: '100%' }}>
    <Cropper { /* CROPPER PROPS */ }  />
  </Box>
</Box>

I also had to add the css override for the library:

.reactEasyCrop_Container {
  overflow: visible !important;
}

from react-easy-crop.