The polished way to upload pictures in React
React Picture Selector bundles drag & drop uploads, circular progress rings, accessible preview modals with zoom & rotation, customizable API flows, and zero CSS dependencies into one production-ready component.
Experience the UX in action
Switch shapes, click upload to simulate animated progress, delete pictures, and click the image to launch the preview modal.
Click avatar to open preview modal
Instant Test Mode
Enable testMode: true to simulate real progress loops and mock uploads with zero backend API code.
Dual Layout Formats
Switch effortlessly between circular profile avatars (type="profile") and rectangular media banners (type="image").
Interactive Lightbox Preview
Click any selected photo to view it full-screen. Supports 90° incremental rotation, zoom scaling, drag pan, and keyboard dismiss.
Zero CSS Runtime & ESM
All styles are strictly inline and encapsulated. No CSS loaders, PostCSS, or Tailwind setup needed in the consuming app.
Engineered for developer happiness
Every feature was designed to make image uploading robust, accessible, and fast to integrate.
Pure Inline Styles
Zero CSS file imports, zero Tailwind setup required, and zero class collisions. Drops flawlessly into any codebase or design system.
Smooth SVG Progress Rings
Real-time circumference-based circular progress for profile avatars and sleek progress bars for rectangular images.
SSR & Next.js 15+ Ready
Guarded against server hydration crashes with browser checks and dynamic portals. Works seamlessly in App Router and Pages Router.
Granular Network Control
Split headers for upload vs delete endpoints, customizable form field names, Bearer tokens, and AbortController request cancellation.
Accessible Preview Modal
Full preview overlay with zoom, 90° rotation, pan, ESC key bindings, and backdrop click dismiss out of the box.
Interactive Test Mode
Prototype UI and upload animations instantly in Storybook, staging, or local tests with zero backend setup required.
Wire up uploads with a handful of props
Feed the component your backend routes once. Callbacks receive both the computed URL and the original HTTP response payload so nothing is lost.
- Built-in preview modal with zoom, 90° rotation & pan
- AbortController native cancellation on demand
- Full API response and URL passed back to callbacks
- Dual shape modes: circular 'profile' and rectangular 'image'
- TypeScript types exported first-class
- Works in Next.js, Remix, Vite, and Create React App
import PictureSelector from "react-picture-selector";
export function UserAvatar() {
return (
<PictureSelector
imageUrl="https://cdn.example.com/avatar.jpg"
title="Profile Avatar"
type="profile"
size={180}
apiConfig={{
baseUrl: "https://api.example.com",
uploadUrl: "/users/avatar",
deleteUrl: "/users/avatar",
headers: {
Authorization: "Bearer your-token",
},
}}
onChangeImage={(url, response) => {
console.log("Uploaded new photo:", url, response);
}}
onDeleteImage={(response) => {
console.log("Photo removed:", response);
}}
/>
);
}Ready to upgrade your upload experience?
Install the package today, configure in minutes, and give your users an intuitive, polished photo selector.