Croppie: How can I use croppie in reactjs?

[carloscba]

I've used croppie very well with angularjs and now I want include in my reactjs projects. I'm very apreciate if anyone have a example to share.

[thedustinsmith]

This would be a good place to seek help: https://github.com/arssly/react-coppie. Or at least get you a start. Sounds like the dev has stopped work on it, but maybe you can help out.

I don't have the time to do any kind of react + croppie work.

[JWLangford]

Don't know if anyone is still looking at this, but I'll share how I used croppie in my react application
I'm using react + typescript + Material-UI

import "croppie/croppie.css"
import { Button, Grid } from "@material-ui/core"
import * as React from "react"
import Croppie from "croppie"

export function CroppieExample() {
  const [image, setImage] = React.useState("")
  const [croppie, setCroppie] = React.useState<Croppie | null>(null)

  function handleImage(image: string) {
    setImage(image)
    const el = document.getElementById("image-helper")
    if (el) {
      const croppieInstance = new Croppie(el, {
        enableExif: true,
        viewport: {
          height: 250,
          width: 250,
        },
        boundary: {
          height: 280,
          width: 400,
       }
    });
    croppieInstance.bind({
      url: image,
    });
    setCroppie(croppieInstance)
    }
  }

  function handleSubmit(event: any) {
    event.preventDefault()
    if (croppie !== null) {
      croppie.result({type: 'base64',
      size: {
          width: 480,
          height: 480
      }}).then((blob) => {
        console.log(blob)
      }
      )
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <Grid container spacing={2}>
        {image === "" && (
            <Grid item xs={12}>
                {/* Your image upload functionality here */}
                <ImageUpload image={image} setImage={handleImage} />
            </Grid>
            )}
        {image !== "" && (
            <Grid item container justify="center" xs={12}>
              <div id="image-helper"></div>
            </Grid>
            )}
        <Grid container item xs={12} justify="flex-end">
          <Button color="primary" variant="contained" type="submit">
            Submit
          </Button>
        </Grid>
      </Grid>
    </form>
  )
}

[huskarcgh48]

very good sample. thanks