Скачать или смотреть Reddit Clone Series Ep 17 – Cropper with React Image Crop

In this episode, we extend Stage Two of the Community Create dialog by building the Cropper component. We install and configure react-image-crop, set up aspect-ratio–based cropping for Banner and Avatar, and handle dynamic rendering of uploaded images. To improve maintainability, we refactor crop logic into helper functions and move the Cropper into its own reusable component. We also fix a flickering bug by memoizing image URLs and optimize sizing with Next.js Image.

Resources:
Buy me a coffee: buymeacoffee.com/bartingyo
Code Repository: https://github.com/bartingyo/reddit-c...
React Image Crop: https://www.npmjs.com/package/react-i...

Timeline:
00:00 – Intro
02:00 – Install & Setup react-image-crop
05:00 – Initial Cropper Integration
08:20 – Styling & Container Setup
10:20 – Aspect Ratio Crops (Banner & Avatar)
16:00 – Restricting Crop Resizing
18:05 – Dynamic Image Rendering
22:30 – Fixing Flickering with useMemo
23:20 – Refactor Crop Logic into Helper
25:20 – Creating Reusable Cropper Component
30:20 – Dynamic Alt Text & Image Optimization
32:10 – Final Refactor & Commit


🔔 Don't forget to like, comment, and subscribe for more web dev videos! If you have suggestions or run into issues, drop a comment below—let's solve it together! 🙌