React Image Editor

Professional image editing made simple with a powerful React component built on modern web technologies.

✨ Features

• 🎨 Professional Image Editing - Load and edit images with intuitive tools
• 🔍 Smart Blur Tool - Add selective blur effects to specific areas
• ✂️ Precise Crop Tool - Crop images with pixel-perfect accuracy
• 🔷 Shape Tools - Add rectangles and circles with custom styling
• 📝 Text Tool - Add and edit text on images with customizable colors
• ✏️ Drawing Mode - Free-hand drawing with customizable brush settings
• ↩️ Undo/Redo System - Full history management with keyboard shortcuts
• 🎯 Selection Mode - Intuitive object selection and manipulation
• 🎨 Color & Stroke Control - Customizable colors and stroke widths
• ⌨️ Keyboard Shortcuts - Professional workflow with Ctrl+Z, Ctrl+Y, Delete
• 🎛️ Customizable UI - Fully customizable styling with CSS classes
• ❌ Optional Cancel Button - Configurable cancel functionality

🚀 Live Demo

Try it now: https://github.com/izetmolla/react-image-editor

📦 Installation

npm install @mollaizet/react-image-editor
# or
yarn add @mollaizet/react-image-editor
# or
pnpm add @mollaizet/react-image-editor

🎯 Quick Start

import React, { useState } from "react";
import { ImageEditor } from "@mollaizet/react-image-editor";

function App() {
  const [imageUrl, setImageUrl] = useState("");

  const handleImageSelect = (event) => {
    const file = event.target.files[0];
    if (file) {
      const url = URL.createObjectURL(file);
      setImageUrl(url);
    }
  };

  const handleSave = (imageBlob) => {
    // Handle the saved image blob
    const url = URL.createObjectURL(imageBlob);
    console.log("Saved image URL:", url);

    // You can also download the image
    const downloadLink = document.createElement("a");
    downloadLink.href = url;
    downloadLink.download = "edited-image.png";
    downloadLink.click();
  };

  const handleCancel = () => {
    console.log("Editing cancelled");
    setImageUrl(""); // Reset image
  };

  return (
    <div>
      {!imageUrl ? (
        <div className="image-picker">
          <input type="file" accept="image/*" onChange={handleImageSelect} className="file-input" />
          <p>Select an image to start editing</p>
        </div>
      ) : (
        <ImageEditor imageUrl={imageUrl} onSave={handleSave} onCancel={handleCancel} />
      )}
    </div>
  );
}

export default App;

🔧 API Reference

Props

Prop	Type	Required	Default	Description
imageUrl	string	Yes	-	URL of the image to edit
onSave	(imageBlob: Blob) => void	Yes	-	Callback when image is saved
onCancel	() => void	Yes	-	Callback when editing is cancelled
showCancelButton	boolean	No	false	Whether to show the cancel button
className	string	No	""	Custom CSS class for the main container
headerClassName	string	No	""	Custom CSS class for the header
toolbarClassName	string	No	""	Custom CSS class for the toolbar
buttonClassName	string	No	""	Custom CSS class for toolbar buttons
saveButtonClassName	string	No	""	Custom CSS class for the save button
cancelButtonClassName	string	No	""	Custom CSS class for the cancel button
canvasClassName	string	No	""	Custom CSS class for the canvas container
canvasWrapperClassName	string	No	""	Custom CSS class for the canvas wrapper
zoomButtonClassName	string	No	""	Custom CSS class for zoom buttons
background	string	No	"transparent"	Custom background color for canvas
saveButtonTitle	string	No	"Save"	Custom text for the save button
cancelButtonTitle	string	No	"Cancel"	Custom text for the cancel button

Available Tools

• Selection Mode - Select and manipulate objects
• Drawing Mode - Free-hand drawing with customizable brush
• Blur Tool - Add selective blur effects
• Crop Tool - Precise image cropping
• Shape Tools - Add rectangles and circles
• Text Tool - Add and edit text on images (double-click to edit)
• Undo/Redo - Full operation history with keyboard shortcuts

Customization Examples

Basic Customization

<ImageEditor
  imageUrl={imageUrl}
  onSave={handleSave}
  onCancel={handleCancel}
  showCancelButton={true}
  className="my-custom-editor"
  background="#f0f0f0"
/>

Advanced Styling with Tailwind CSS

<ImageEditor
  imageUrl={imageUrl}
  onSave={handleSave}
  onCancel={handleCancel}
  showCancelButton={true}
  headerClassName="bg-gradient-to-r from-purple-500 to-pink-500"
  toolbarClassName="border-2 border-blue-300 rounded-lg"
  buttonClassName="bg-blue-500 hover:bg-blue-600 text-white"
  saveButtonClassName="bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-full"
  cancelButtonClassName="bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded-full"
  canvasClassName="border-4 border-dashed border-gray-400"
  canvasWrapperClassName="shadow-2xl border-4 border-purple-300"
  zoomButtonClassName="bg-yellow-500 hover:bg-yellow-600 text-black"
  saveButtonTitle="Save"
  cancelButtonTitle="Cancel"
/>

Custom CSS Classes

<ImageEditor
  imageUrl={imageUrl}
  onSave={handleSave}
  onCancel={handleCancel}
  showCancelButton={true}
  className="custom-theme"
  toolbarClassName="custom-toolbar"
  buttonClassName="custom-button"
  saveButtonClassName="custom-save-button"
  cancelButtonClassName="custom-cancel-button"
  zoomButtonClassName="custom-zoom-button"
  saveButtonTitle="💾 Save Image"
  cancelButtonTitle="❌ Cancel"
/>

Active State Customization

<ImageEditor
  imageUrl={imageUrl}
  onSave={handleSave}
  onCancel={handleCancel}
  showCancelButton={true}
  // Customize active state of toolbar buttons
  buttonClassName="[&.active]:bg-red-500 [&.active]:border-red-600 [&.active]:text-white"
  // Or use custom CSS classes
  // buttonClassName="custom-active-button"
/>

🚀 Coming Soon

• ➡️ Arrow Tool - Draw arrows and lines
• 📱 Mobile UI - Optimized interface for mobile devices
• 🎨 Filters - Instagram-style filters and effects
• 🤖 AI Tools - Background removal and object recognition

🛠️ Development

# Clone and setup
git clone https://github.com/izetmolla/react-image-editor.git
cd react-image-editor
npm install

# Start development server
npm run dev

# Build library
npm run build:lib

📄 License

MIT License - see LICENSE file for details.

📞 Support

• Demo: https://github.com/izetmolla/react-image-editor
• Issues: GitHub Issues

---

Built with ❤️ by @mollaizet