CROPRO Documentation: Using CROPRO with React

Using CROPRO with React

In this walkthrough we will create a simple React app (using Create React App), add an image to it, and then add CROPRO wired up to crop and rotate that image.

Follow along or just lookup the sections you are interested in below.

Create React App

Let’s create a simple React app as the basis for our project. We will use Create React App for this.

npx create-react-app my-react-cropro-app --template typescript
cd my-react-cropro-app

NOTE:

We are using TypeScript in this walkthrough but feel free to remove the --template typescript part from the command above and just omit type declarations in the code examples below.

We will use class components in this walkthrough. So, we will start with this barebone App.tsx (App.js, if you aren’t using TypeScript).:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>CROPRO Demo.</h1>
      </div>
    );
  }
}

export default App;

Add an image

Now, let's add an image to our app. Grab some JPEG image and copy it to the public folder of the project. Let's call it sample.jpg.

Next we will add the image to our App component and create a ref for it, so that we can pass it to CROPRO.

At this stage, our App file looks like this:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  imgRef = React.createRef<HTMLImageElement>();

  render() {
    return (
      <div className="App">
        <h1>CROPRO Demo.</h1>
        <img ref={this.imgRef} 
          src="sample.jpg" 
          alt="sample" 
          style={{ maxWidth: '50%' }} 
          />
      </div>
    );
  }
}

export default App;

Add CROPRO

Now that we have our base project setup, it is time to add CROPRO.

Run:

npm install cropro

yarn add cropro

After that we can import CROPRO into our component and then wire it up.

import * as cropro from 'cropro';

Let's create a showCropArea() method that we will then call to start cropping and rotating:

showCropArea() {
  if (this.imgRef.current !== null) {
    // create a CropArea
    const cropArea = new cropro.CropArea(this.imgRef.current);
    // attach an event handler to assign cropped image back to our image element
    cropArea.addRenderEventListener(dataUrl => {
      if (this.imgRef.current) {
        this.imgRef.current.src = dataUrl;
      }
    });
    // launch CROPRO
    cropArea.show();
  }
}

The only thing left now is to wire this method up so that when a user clicks on the image CROPRO starts and they can start cropping.

<img ref={this.imgRef} 
  src="sample.jpg" 
  alt="sample" 
  style={{ maxWidth: '50%' }} 
  onClick={() => this.showCropArea()}
/>

And that's all it takes to integrate the basic CROPRO functionality into a React app so users can crop and rotate the images.

The complete code

Here's the complete final App.tsx for this walkthrough:

import React, { Component } from 'react';
import './App.css';
import * as cropro from 'cropro';

class App extends Component {
  imgRef = React.createRef<HTMLImageElement>();

  showCropArea() {
    if (this.imgRef.current !== null) {
      // create a CropArea
      const cropArea = new cropro.CropArea(this.imgRef.current);
      // attach an event handler to assign cropped image back to our image element
      cropArea.addRenderEventListener(dataUrl => {
        if (this.imgRef.current) {
          this.imgRef.current.src = dataUrl;
        }
      });
      // launch CROPRO
      cropArea.show();
    }
  }

  render() {
    return (
      <div className="App">
        <h1>CROPRO Demo.</h1>
        <img ref={this.imgRef} 
          src="sample.jpg" 
          alt="sample" 
          style={{ maxWidth: '50%' }} 
          onClick={() => this.showCropArea()}
          />
      </div>
    );
  }
}

export default App;

JavaScript version of this demo in CodeSandbox

Check out the JavaScript version of this demo embeded below, or click here to open it in CodeSandbox.