Installation Guide

React Picture Selector provides a complete solution for handling image uploads with a modern and responsive interface. It supports both drag-and-drop and traditional selection methods, offering real-time progress indication through a smooth progress ring or percentage display. Animations are optimized with requestAnimationFrame, ensuring fluid transitions and minimal CPU consumption even on lower-end devices. Upload operations can be safely canceled using the built-in AbortController, providing users with full control over the process.

Installation Steps

npm install react-picture-selector

Dependencies

• React (for component rendering and state management)
• Axios (for making API requests in real mode)

Basic Setup

import PictureSelector from "react-picture-selector";
import { useState } from "react";

function ProfilePage() {
  const [currentImage, setCurrentImage] = useState("https://example.com/avatar.jpg");

  const handleImageChange = (imageUrl: string, responseData?: any) => {
    setCurrentImage(imageUrl);
    console.log("API Response:", responseData);
  };

  return (
    <PictureSelector
      imageUrl={currentImage}
      onChangeImage={handleImageChange}
      type="profile"
      title="Profile Photo"
      size={150}
    />
  );
}