React Image Editor

A professional image editing library for React applications with both headless and styled component options.

Features

• Headless Mode - Full control over UI with React hooks
• Styled Components - Ready-to-use components for quick setup
• Text Tool - Add and style text with font controls
• Blur Tool - Add selective blur effects to specific areas
• Crop Tool - Pixel-perfect image cropping
• Shape Tools - Rectangles and circles with custom styling
• Drawing Mode - Free-hand drawing with customizable brush
• Undo/Redo - Full history management with keyboard shortcuts
• Zoom & Pan - Navigate large images with ease
• Original Resolution Export - Exports maintain original image dimensions
• MIME Type Validation - Validate image files before loading
• Base64 Support - Load and export images as data URLs

If React Image Editor doesn't cover your needs we recommend taking a look at Pintura.

Pintura features cropping, rotating, flipping, filtering, annotating, and lots of additional functionality to cover all your image and video editing needs on both mobile and desktop devices.

Learn more about Pintura

Installation

npm install @ozdemircibaris/react-image-editor

Quick Start

Styled Component

import { ImageEditor } from "@ozdemircibaris/react-image-editor";

function App() {
  const handleSave = (blob: Blob) => {
    const url = URL.createObjectURL(blob);
    // Download or upload the image
  };

  return (
    <ImageEditor
      imageUrl="/path/to/image.jpg"
      onSave={handleSave}
      onCancel={() => console.log("Cancelled")}
    />
  );
}

Headless Mode

import { useImageEditor } from "@ozdemircibaris/react-image-editor/core";

function CustomEditor({ imageUrl }: { imageUrl: string }) {
  const editor = useImageEditor({
    imageUrl,
    defaultColor: "#ff0000",
    defaultStrokeWidth: 3,
  });

  return (
    <div>
      <canvas ref={editor.canvasRef} />

      <div>
        <button onClick={() => editor.text.addText()}>Add Text</button>
        <button onClick={() => editor.blur.add()}>Add Blur</button>
        <button onClick={() => editor.crop.start()}>Crop</button>
        <button onClick={() => editor.shapes.add("rectangle")}>Rectangle</button>
        <button onClick={() => editor.drawing.toggle()}>Draw</button>
        <button onClick={editor.history.undo} disabled={!editor.history.canUndo}>
          Undo
        </button>
        <button onClick={editor.history.redo} disabled={!editor.history.canRedo}>
          Redo
        </button>
      </div>

      {editor.crop.isActive && (
        <div>
          <button onClick={() => editor.crop.apply()}>Apply</button>
          <button onClick={() => editor.crop.cancel()}>Cancel</button>
        </div>
      )}

      <button onClick={async () => {
        const blob = await editor.exportToBlob();
        // Handle the blob
      }}>
        Save
      </button>
    </div>
  );
}

Image Validation

Validate image files by MIME type before loading:

import {
  validateImageFile,
  createValidatedImageURL,
  SUPPORTED_IMAGE_TYPES,
} from "@ozdemircibaris/react-image-editor/core";

// Option 1: Validate file directly
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
  const file = e.target.files?.[0];
  if (!file) return;

  const result = validateImageFile(file);
  if (!result.valid) {
    alert(result.error);
    return;
  }

  const url = URL.createObjectURL(file);
  setImageUrl(url);
};

// Option 2: Validate and create URL in one step
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
  const file = e.target.files?.[0];
  const { url, error } = createValidatedImageURL(file);

  if (!url) {
    alert(error);
    return;
  }

  setImageUrl(url);
};

// Custom allowed types
const result = validateImageFile(file, ["image/jpeg", "image/png"]);

Supported MIME types: jpeg, png, gif, webp, svg+xml, bmp

Export Options

// Export as Blob (original resolution)
const blob = await editor.exportToBlob();

// Export as Base64 data URL
const dataUrl = editor.exportToDataURL("png", 1);

Exports preserve the original image dimensions. If you load a 1920x1080 image, the export will be 1920x1080 regardless of canvas display size.

API Reference

useImageEditor Config

Option	Type	Default	Description
imageUrl	string	""	URL of the image to load
width	number	auto	Canvas width
height	number	auto	Canvas height
defaultColor	string	"#ff7000"	Default color for shapes/drawing
defaultStrokeWidth	number	2	Default stroke width
maxHistorySize	number	50	Max undo/redo steps
blurIntensity	number	20	Blur effect intensity

useImageEditor Return Value

Property	Description
canvas	Fabric.js canvas instance
canvasRef	Callback ref for canvas element
hasImage	Whether an image is loaded
history.undo()	Undo last action
history.redo()	Redo last undone action
history.canUndo	Whether undo is available
history.canRedo	Whether redo is available
blur.add()	Add a blur region
blur.clearAll()	Remove all blur regions
crop.start()	Enter crop mode
crop.apply()	Apply the crop
crop.cancel()	Cancel crop mode
crop.isActive	Whether crop mode is active
drawing.enable()	Enable drawing mode
drawing.disable()	Disable drawing mode
drawing.toggle()	Toggle drawing mode
drawing.isActive	Whether drawing is active
shapes.add(type)	Add a shape ("rectangle" or "circle")
text.addText(text?)	Add text to canvas
text.setFontSize(size)	Set font size of selected text
text.setFontFamily(family)	Set font family of selected text
text.setTextColor(color)	Set color of selected text
text.setFontWeight(weight)	Set bold ("normal" or "bold")
text.setFontStyle(style)	Set italic ("normal" or "italic")
text.fontFamilies	Available font families
selection.enable()	Enable selection mode
selection.deleteSelected()	Delete selected object
style.color	Current color
style.setColor(color)	Set color
style.strokeWidth	Current stroke width
style.setStrokeWidth(width)	Set stroke width
zoom.in()	Zoom in
zoom.out()	Zoom out
zoom.level	Current zoom level
exportToBlob()	Export canvas as Blob
exportToDataURL(format, quality)	Export as data URL
dispose()	Clean up resources

ImageEditor Props (Styled Component)

Prop	Type	Required	Description
imageUrl	string	Yes	Image URL to edit
onSave	(blob: Blob) => void	Yes	Save callback
onCancel	() => void	Yes	Cancel callback
showCancelButton	boolean	No	Show cancel button
className	string	No	Container class
background	string	No	Canvas background color

Keyboard Shortcuts

• Ctrl/Cmd + Z - Undo
• Ctrl/Cmd + Y - Redo
• Delete/Backspace - Delete selected object
• Escape - Exit text editing mode
• Space + Drag - Pan canvas

Development

# Run tests
npm test

# Run tests once
npm run test:run

# Run tests with coverage
npm run test:coverage

# Lint
npm run lint

# Build
npm run build

License

MIT

Links

• Live Demo
• GitHub
• npm