react-profile-crop v1.0.2

React Profile Cropper

A flexible, customizable React component for cropping profile pictures with real-time preview.

Features

• 🖼️ Circular, square, or rectangular crop shapes
• 🔄 Real-time preview
• 📱 Responsive and mobile-friendly with touch support
• 🎚️ Zoom and drag controls
• 🎨 Fully customizable theming
• 📤 Multiple output formats (PNG, JPEG, WebP)
• ⚙️ Configurable aspect ratio
• 🔍 Error handling for file types and size

Installation

npm install react-profile-cropper
# or
yarn add react-profile-cropper

Basic Usage

import React from "react";
import { ProfileCropper } from "react-profile-cropper";

function App() {
  return (
    <div className="app">
      <ProfileCropper
        onSave={(imageData) => {
          console.log("Cropped image:", imageData);
          // Save to server or state
        }}
      />
    </div>
  );
}

export default App;

Advanced Usage

import React, { useState } from "react";
import { ProfileCropper } from "react-profile-cropper";

function ProfileEditor() {
  const [profileImage, setProfileImage] = useState(null);
  const [showCropper, setShowCropper] = useState(false);

  const handleSave = (imageData) => {
    setProfileImage(imageData);
    setShowCropper(false);
    // Upload to server
  };

  return (
    <div className="profile-editor">
      {profileImage ? (
        <div className="current-profile">
          <img src={profileImage} alt="Profile" className="profile-image" />
          <button onClick={() => setShowCropper(true)}>Change Picture</button>
        </div>
      ) : (
        <button onClick={() => setShowCropper(true)}>
          Add Profile Picture
        </button>
      )}

      {showCropper && (
        <div className="cropper-modal">
          <ProfileCropper
            initialImage={profileImage}
            onSave={handleSave}
            onCancel={() => setShowCropper(false)}
            cropShape="circle"
            outputFormat="png"
            maxFileSizeMB={2}
            theme={{
              accentColor: "#4a90e2",
              buttonBackgroundColor: "#4a90e2",
            }}
          />
        </div>
      )}
    </div>
  );
}

export default ProfileEditor;

Custom Theming

import { ProfileCropper } from "react-profile-cropper";

const customTheme = {
  backgroundColor: "#ffffff",
  overlayColor: "rgba(0, 0, 0, 0.7)",
  borderColor: "#cccccc",
  accentColor: "#ff5722",
  textColor: "#333333",
  buttonBackgroundColor: "#ff5722",
  buttonTextColor: "white",
};

function App() {
  return (
    <ProfileCropper
      theme={customTheme}
      // other props...
    />
  );
}

Props

Core Functionality

Style and Appearance

Controls and Features

Text Customization

Image Constraints

CSS Class Names

Error Handling

Default Theme

{
  backgroundColor: "#f3f2ef",
  overlayColor: "rgba(0, 0, 0, 0.6)",
  borderColor: "#e0e0e0",
  accentColor: "#0077B5",
  textColor: "#333333",
  buttonBackgroundColor: "#0077B5",
  buttonTextColor: "white"
}

TypeScript Support

The package includes TypeScript definitions. You can import the types:

import {
  ProfileCropperProps,
  CropArea,
  ThemeOptions,
  CropShape,
  OutputImageType,
} from "react-profile-cropper";

Development

Building the package

npm run build

Running tests

npm test

License

MIT © ydixit007(https://github.com/ydixit007)