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