Using React Dropzone UI and Croppie together

Why

Recently I’ve been designing a ui that uses both dropzone and croppie. These weren’t exactly the most compatible and it took a bit of tinkering to get it working the way I wanted. I thought I’d share this in case anybody may have a similar use case.

How

This UI uses state to determine what the page should render. Since croppie can only be initialized once I used the useEffect hook to attach it to the page when it is first loaded.

The onDrop function will read the file and bind it to react croppie and set showReactCrop to true and showReactCrop to false.

Don’t forget your CSS

One important note is the CSS. You will need some way to toggle the display property on the croppie-demo div. This is what I added to my CSS file:

#croppie-demo {
  display: none;
}

.show-croppie {
  display: block !important;
}

The !important is on there because of CSS specificity. Id selectors have more specificity than class selectors. You could just create a croppie-demo class on the div as well and select it like that instead.

Example code

Sandbox: https://codesandbox.io/s/react-dropzone-ui-and-croppie-k21ew

Thanks for Reading and good luck on anything you’re working on!