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

• 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)

npm install react-image-crop-drag

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}
    />
  );
}

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.

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

# Install dependencies
npm install

# Build package
npm run build

MIT