{"repo":"mosch/react-avatar-editor","free":true,"listed":false,"github":"https://github.com/mosch/react-avatar-editor","clone":"git clone https://github.com/mosch/react-avatar-editor.git","description":"Small avatar & profile picture component. Resize and crop uploaded images using a intuitive user interface.","language":"TypeScript","stars":2498,"topics":["react","avatar","crop","javascript","image","profile-picture-component"],"license":"MIT","category":"ui-components","readme_excerpt":"react-avatar-editor Avatar / profile picture cropping component for React. Resize, crop and rotate your uploaded image using a simple and clean user interface. Features - Fully typed, written in TypeScript - Works with React 17, 18, and 19 - Resize, crop, and rotate - Rounded or square crop area - Built-in loading indicator - useAvatarEditor hook for easy access to the editor API - Zero runtime dependencies Install Usage Basic With useAvatarEditor hook The useAvatarEditor hook provides a clean API to access the editor's methods without managing refs manually. All methods return null if the editor isn't ready or no image is loaded. Hook methods Method Returns Description -------------------------- --------------------------- ------------------------------------------------------- ref RefObject Pass this to the ref prop of AvatarEditor . getImage() HTMLCanvasElement \\ null The cropped image at the original resolution. getImageScaledToCanvas() HTMLCanvasElement \\ null The cropped image scaled to the editor dimensions. getCroppingRect() object \\ null The crop area as { x, y, width, height } (0–1 range). With ref (alternative) If you prefer using refs directly: With drag and drop Using react-dropzone: Animated rotation The rotate prop can be animated using any animation library. Here's an example with motion: Props Prop Type Default Description ----------------------- -------------------- ---------------- ----------------------------------------------------------------------------","default_branch":null,"files":null,"tree":[],"storefront":"/r/mosch","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/mosch/react-avatar-editor/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}