How to Create Image Cropping in React using FilePond

Image cropping is a process used to remove the unwanted part of an image. If you want to build image cropping in React, we have a simple solution.

In this tutorial, you’ll learn how to build image cropping and image uploading in React js app using the FilePond library.

FilePond is a JavaScript module that gives smooth drag n’ drop file uploading experiences. This guide will help install, set up, and extend FilePond in React.

We’ll convert a simple component to a image uploading and image cropping component by importing and using FilePond to React.

React Js Image Cropping Tutorial with Example

  • Step 1: Create React Project
  • Step 2: Install FilePond Libraries
  • Step 4: Create Image Cropping Feature
  • Step 5: Add Component to App.js
  • Step 6: View App on Browser

Create React Project

Open the code editor, head over to terminal, run command to install a React app.

npx create-react-app demo-react

Install FilePond Libraries

Next, you must install the FilePond package and its dependencies to build the feature.

npm install filepond react-filepond filepond-plugin-image-crop filepond-plugin-image-exif-orientation filepond-plugin-image-preview filepond-plugin-image-transform

Create Image Cropping Feature

In your project folder make components/ folder, then create Home.js file and start importing all the given code.

import React, { useState } from 'react'
import { FilePond, registerPlugin } from 'react-filepond'
import 'filepond/dist/filepond.min.css'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'
import FilePondPluginImageCrop from 'filepond-plugin-image-crop' // Crops image
import FilePondPluginImageTransform from 'filepond-plugin-image-transform' // Changes image to match crop
registerPlugin(
  FilePondPluginImageTransform,
  FilePondPluginImagePreview,
  FilePondPluginImageCrop,
)

function Home() {
  const [images, setImages] = useState([])

  return (
    <div className="container">
      <h2 className="mb-2">React Js Image Crop Example</h2>

      <FilePond
        files={images}
        allowImageCrop={true}
        allowImageTransform={true}
        imageCropAspectRatio={'1:1'}
      />
    </div>
  )
}

export default Home

Add Component to App.js

Now, you must register the Home component in App.js file. It will display the Home component data on the browser.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import Home from './components/Home.js'


function App() {
  return (
    <div>
      <Home />
    </div>
  )
}

export default App;

View App on Browser

Finally, we have implemented the FilePond feature in React. Run the command to serve the app on the browser.

npm start
http://localhost:3000

How to Create Image Cropping in React using FilePond