react-image-crop-drag

A React component for creating draggable image views with automatic scaling and positioning. Perfect for concert posters, event banners, and profile headers.

Features

• Vertical and Horizontal drag adjustment for perfect image positioning
• Zoom support for detailed cropping and 2D scrolling
• Automatic image scaling while maintaining aspect ratio
• Smooth animations and transitions
• Accessibility first with keyboard navigation
• Touch device support for mobile interactions
• Center positioning with smart constraints
• No image overflow
• Zero dependencies (except React)

Installation

npm install react-image-crop-drag

Example

import { useState } from 'react';
import ImageCropView from 'react-image-crop-drag';

function App() {
  const [isEditing, setIsEditing] = useState(false);
  const [zoom, setZoom] = useState(1);

  const handleSave = (cropData) => {
    setIsEditing(false);
  };

  return (
    <ImageCropView
      src="/path/to/concert-poster.jpg"
      alt="Concert Poster 2024" 
      containerWidth={800}
      containerHeight={400}
      isEditing={isEditing}
      zoom={zoom}
      onSave={handleSave}
    />
  );
}

Accessibility

This component is built with accessibility in mind:

• Keyboard Support: When in editing mode, the container is focusable. Use Arrow keys (Up/Down/Left/Right) to adjust the image position.
• Screen Readers: Helper texts and ARIA attributes provide context to screen reader users.
• Touch Support: Full touch support for dragging on mobile devices.

Props

Prop	Type	Required	Default	Description
src	string	Yes	-	Image source URL
alt	string	No	"Croppable image"	Alt text for the image
containerWidth	number	No	800	Width of the container
containerHeight	number	No	400	Height of the container
isEditing	boolean	No	false	Enable/disable drag mode
zoom	number	No	1	Zoom level (multiplier)
onSave	function	No	-	Callback with crop data

Example Use Cases

• Concert posters and event banners
• Profile header images
• Cover photos for social media
• Featured image sections
• Banner advertisements

Development

# Install dependencies
npm install

# Build package
npm run build

License

MIT